浅谈JavaScript的Canvas(绘制图形)
HTML5中新增加的一个元素canvas,要使用canvas元素,浏览器必须支持html5。通过canvas标签来创建元素,并需要为canvas指定宽度和高度,也就是绘图区域的大小。 <canvas id="mycanvas" style="width:500px;height:500px;"></canvas> 。要在canvas上画图,需要取得canvas的上下文,通过getContext方法来获取上下文。 var context=canvas.getContext("2d"); 在使用getContext方法之前,需要判断浏览器是否支持该方法。
使用画布的toDataURL方法,可以将canvas转为图片格式。这个方法接收一个参数,即图片的MIME类型格式。如果要取得画布中一个png格式的图片,可以使用以下的代码:
1 var url=canvas.toDataURL("image/png");
2 var img=document.createElement("img");
3 img.src=url;
- 填充和描边
2d上下文的两种基本操作就是填充和描边。填充就是用指定的颜色、渐变色、图像填充图形,描边在图形的边缘画线。大多数上下文操作都需要填充和描边操作,这两个操作的属性取决于strokeStyle和fillStyle。
1 var canvas=document.getElementById("mycanvas");
2 if(canvas.getContext){
3 var context=canvas.getContext("2d");
4 context.strokeStyle="#000099";
5 context.fillStyle="#0099FF";
6
7 }
上面的代码为上下文的两种属性strokeStyle和fillStyle指定了颜色值。可以使用CSS中指定颜色值的任何格式,包括颜色名、十六进制编码、rgb、rgba、hsl和hsla。
- 绘制矩形
矩形是一个可以直接在2d上下文中绘制的图形。与矩形有关的方法包括fillRect、strokeRect和clearRect方法。这三个方法接收4个参数,矩形的x坐标、矩形的y坐标、矩形的长度、矩形的宽度。参数的单位是像素。
1 var canvas=document.getElementById("mycanvas");
2 if(canvas.getContext){
3 var context=canvas.getContext("2d");
4 context.strokeStyle="#000099";
5 context.fillStyle="#0099FF";
6 context.fillRect(10,10,50,50);
7 //context.strokeRect(0,0,200,200);
8 //downloadFile('ship.png', canvas.toDataURL("image/png"));
9
10 }
通过上面的代码可以绘制一个矩形,从10,10处开始绘制,矩形的长和高都是50px。
1 var canvas=document.getElementById("mycanvas");
2 if(canvas.getContext){
3 var context=canvas.getContext("2d");
4 context.strokeStyle="rgba(0,0,255,0.5)";
5 context.fillStyle="red";
6 context.fillRect(10,10,50,50);
7 context.fillStyle="rgba(0,0,255,0.5)";
8 context.fillRect(30,30,50,50);
9 //context.strokeRect(0,0,200,200);
10 //downloadFile('ship.png', canvas.toDataURL("image/png"));
11
12 }
通过指定fillStyle为rgba格式,可以绘制半透明的矩形。上面的代码创建了两个矩形,其中一个为半透明颜色。
通过clearRect可以清除画布上面的图形。需要传入x坐标,y坐标,长度和高度。
1 var canvas=document.getElementById("mycanvas");
2 if(canvas.getContext){
3 var context=canvas.getContext("2d");
4 context.strokeStyle="rgba(0,0,255,0.5)";
5 context.fillStyle="red";
6 context.fillRect(10,10,50,50);
7 context.fillStyle="rgba(0,0,255,0.5)";
8 context.fillRect(30,30,50,50);
9 context.clearRect(0,0,50,50);
10 //context.strokeRect(0,0,200,200);
11 //downloadFile('ship.png', canvas.toDataURL("image/png"));
12
13 }
上面的代码使用clearRect方法清除画布上的图形,从0,0处开始清除,长度为50,高度也为50。
- 绘制路径
2d上下文支持绘制路径的方法。通过路径可以创造复杂的形状和线条。要绘制路径,首先需要调用beginPath方法,表示要开始绘制路径。然后在调用以下方法:arc(x,y,radius,startangle,endangle,countclockwise),以x、y为圆心绘制一条弧线,起始和结束弧度分别为startangle、endangle。最后一个参数表示是否按逆时针方向计算,默认为false;arcTo(x,y,x1,y1,radius),从上一点开始绘制弧线到x1、y1为止,并以给定的半径radius穿过x、y;bezierCurveTo(c1x,c1y,c2x,c2y,x1,y1),从上一点开始绘制一条曲线,到x1、y1为止,并以c1x、c1y和c2x、c2y为控制点;lineTo(x,y),从上一点开始,绘制一条直线到x,y为止;moveTo(x,y),将绘图游标移动到x、y,不绘制线;quadraticCurveTo(cx,cy,x,y),从上一点开始绘制一条二次曲线,到x、y为止,并以cx和cy为控制点;rect(x,y,width,height),从x,y开始绘制一个矩形,长度为width,高度为height,该矩形是一个路径。
1 var canvas=document.getElementById("mycanvas");
2 if(canvas.getContext){
3 var context=canvas.getContext("2d");
4 context.strokeStyle="rgba(0,0,255,0.5)";
5 context.fillStyle="red";
6 context.beginPath();
7 //context.moveTo(10,10);
8 //context.rect(10,10,30,30);
9 context.moveTo(50,50);
10 context.lineTo(80,80);
11 context.lineTo(100,90);
12 context.stroke();
13 context.closePath();
14 //context.strokeRect(0,0,200,200);
15 //downloadFile('ship.png', canvas.toDataURL("image/png"));
16
17 }
通过上面的代码可以绘制一个多段线,从50、50处开始,然后到80、80,最后在100、90结束。
1 var canvas=document.getElementById("mycanvas");
2 if(canvas.getContext){
3 var context=canvas.getContext("2d");
4 context.strokeStyle="#000099";
5 context.fillStyle="red";
6 context.beginPath();
7 //绘制圆
8 context.arc(100,100,99,0,2*Math.PI,false);
9 //移动图标
10 context.moveTo(194,100);
11 //绘制圆
12 context.arc(100,100,90,0,2*Math.PI,false);
13 context.moveTo(100,100);
14 //分针
15 context.lineTo(100,20);
16 context.moveTo(100,100);
17 //时针
18 context.lineTo(35,100);
19 context.moveTo(100,100);
20 //秒针
21 context.lineTo(160,160);
22 context.stroke();
23 context.closePath();
24
25 //downloadFile('ship.png', canvas.toDataURL("image/png"));
26
27 }
通过上面的代码,可以在画布上绘制简单的时钟。
- 绘制文本
2d绘图上下文也提供了绘制文本的方法。绘制文本有两个方法fillText和strokeText。这两个方法需要四个参数:文本字符串、x坐标、y坐标、可选的最大像素宽度。这两个方法以下列3个属性为基础:font,表示文本样式,包括样式、大小和字体;textAlign,表示文本的对齐方法,start、end、left、right和center;textBaseline表示文本的基线,可能的值有top、hanging、middle、alphabetic、ideographic和bottom。
fillText使用fillStyle属性绘制为本,strokeText方法使用strokeStyle属性绘制文本。通常情况,使用fillText来绘制文本。
1 var canvas=document.getElementById("mycanvas");
2 if(canvas.getContext){
3 var context=canvas.getContext("2d");
4 context.strokeStyle="#000099";
5 context.fillStyle="red";
6 context.font="italic 35px 黑体";
7 context.textAlign="center";
8 context.textBaseline="middle";
9 context.fillText("JavaScript",100,100);
10
11 //downloadFile('ship.png', canvas.toDataURL("image/png"));
12
13 }
通过上面的代码,在canvas中绘制文本。设置textAlign为center和textBaseline为middle,则文字位于100,100的水平和垂直中心点。
- Python 爬虫 1 快速入门
- Exim Off-by-one(CVE-2018-6789)漏洞复现分析
- 一文学会用 Tensorflow 搭建神经网络
- 数据降维处理:PCA之特征值分解法例子解析
- 理解Eureka的自我保护模式
- 如何使用Feign构造多参数的请求
- 最简日志打印规范
- 碎片化 | 第四阶段-47-值栈细节问题-视频
- word2vec 模型思想和代码实现
- 碎片化 | 第四阶段-48-hibernate概述和配置-视频
- 【LEETCODE】模拟面试-357- Count Numbers with Unique Digits
- Python 爬虫 2 爬取多页网页
- 碎片化 | 第四阶段-49-hibernate之HQL查询操作-视频
- Spring Cloud各组件超时总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一分钟知识点:linux命令之su 和 su -
- 一分钟知识点:maven的版本管理
- Kafka中几个容易混淆的概念
- 一文读懂H5,APP,WAP,公众号支付等多种支付方式的区别
- Python开发植物大战僵尸游戏
- 《剑指 offer》 21. 调整数组顺序使奇数位于偶数前面
- Linux基础入门 | 服务器集群使用指南
- bedtools | 快速筛选重合区间
- motifStack | 绘制motif序列结构图
- 如何优雅的统计基因外显子长度
- Conda | 轻松安装生信工具
- R语言绘图 | 气泡矩阵图
- 在测试自动化中使用Java枚举
- 前端|初学vue
- 使用clusterProfiler对非模式生物进行富集分析