HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、
圆、⾃定义图像）
⼀、对 canvas 的理解
<canvas>标签是 HTML5 中的新标签，像所有的 dom 对象⼀样它有⾃⼰本⾝的属性、⽅法和事件。
canvas 是⽤来在⽹页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使⽤ js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、⽂字、⾃定义图像等。
浏览器⽀持
注释：Internet Explorer 8 以及更早的版本不⽀持 <canvas> 标签。Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari ⽀持 <canvas>标签。
⼆、基本⽅法
绘图环境：
语法 Context(contextID)
参数contextID指定了您想要在画布上绘制的类型。当前唯⼀的合法值是 "2d"，它指定了⼆维绘图，并且导致这个⽅法返回⼀个环境对象，该对象导出⼀个⼆维绘图API。
【注】：getContext() ⽅法返回⼀个⽤于在画布上绘图的环境。
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。
绘制图形样式style（⼀般在绘制图形前先进⾏样式设定）：
context.fillStyle //填充样式
context.strokeStyle //笔触颜⾊
context.lineWidth //边框宽度
绘制图像有两种⽅法：
context.fill() //填充
context.stroke() //绘制边框
颜⾊的表⽰⽅式:
颜⾊名称:"red" "green" "blue"
⼗六进制颜⾊值: "#FFFFFF"
三⾊值：rgb(1-255,1-255,1-255)
四⾊值：rgba(1-255,1-255,1-255，透明度)
三、使⽤ <canvas>
Step1: ⾸先在html页⾯中添加<canvas>标签，规定好画布的id和尺⼨，代码如下：
<!--规定了canvas元素的id名称为canvas、宽度为400px、⾼度为300px-->
<canvas id="myCanvas" width="400" height="300"/>
Step2: 通过JavaScript来进⾏绘制：
⽅法⼀：
<!--⽤⾕歌浏览器，获取canvas对象时需要先加载对象，所以要把该段代码放到body中，在js⽂件⾥进⾏绘制图像-->
<script src="canvas.js"></script>
⽅法⼆：
<!--或者直接在body⾥编写代码-->
<script type="text/javascript">
var canvas = ElementById("myCanvas");
var context = Context("2d");
context.fillStyle = "#FF0000";
context.fillRect(50,50,150,100);
</script>
图解：
Step3: Step2 分步骤：
通过id来捕获canvas元素
创建 context 对象
指定 fillStyle 填充颜⾊为红⾊指定 fillRect ：fillRect(起始点x轴坐标, 始点y轴坐标, 宽度, ⾼度);
四、实例
1--绘制线条：
veTo(x,y)
context.lineTo(x,y)
x:x坐标
y:y坐标
起点 moveTo 的点到终点 lineTo 的点之间画⼀条直线
如果没有moveTo那么第⼀次lineTo的效果和moveTo⼀样
每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前⼀次lineTo的结束点
1 1 // 绘制对⾓线
2 2 function demo1(id){
3 3 var canvas = ElementById(id);
4 4 var context = Context("2d");
5 5
6 6 context.strokeStyle = "#ff0000";
7 7
8 8 veTo(0,0);
9 9 context.lineTo(200,100);
10 10 context.stroke();
11 11 }
View Code
实例结果：
1// 绘制直⾓三⾓形
2function demo1(id){
3var canvas = ElementById(id);
4 var context = Context("2d");
5
6 context.strokeStyle = "#ff0000";
7
8 context.lineTo(20, 20);
9 context.lineTo(20, 70);
10 context.lineTo(70, 70);
11 context.lineTo(20, 20);
12 context.stroke();
13 }
View Code
【注】：
1. 三⾓形有三个点，但在连线的时候还需要连回顶点；
2. 最后⼀定记得加上 stroke(); 初学时容易犯这个⽑病，这相当于你把点定好了，却没⽤线连起来，岂不......
实例结果：
CSS属性中有⼀圆⾓设置 radius，canvas画线段也要达到这种圆⾓匾额效果，我么也有相应的办法：
lineJoin 属性，可以设置线的交汇处的样式，lineJoin有3个属性值：miter(尖⾓，默认)，bevel（斜⾓）,round（圆⾓）
lineCap 属性，定义线条的端点。lineCap有3个属性值：butt（平，默认）,round（圆）,square（⽅）
区别只是平头没有伸出去那么⼀截。圆头和⽅头都会伸出去⼀截，这⼀节是多长呢？就是线条宽度的⼀半。借⽤⼀张图说明： 1// 圆⾓连线
2function demo1(id){
3
4var canvas = ElementById(id);
5 var context = Context("2d");
6
7 context.beginPath();
8 veTo(100,8);
9 context.lineTo(180,8);
10 context.closePath();
11 context.lineWidth = 8;
12 context.strokeStyle = "#00ff00";
13 context.lineJoin = "round";
14 context.stroke();
15
16 context.beginPath();
17 veTo(100,20);
18 context.lineTo(100,80);
19 context.lineTo(180,80);
20 context.lineTo(180,20);
21 context.lineTo(100,20);
22 context.closePath();//闭合路径
23 context.lineWidth = 10;
24 context.strokeStyle = 'rgba(0,255,0,0.5)';
25 context.lineJoin = "round";
26 context.stroke();
27 }
View Code
实例结果：
2--绘制矩形：
context.fillRect(x,y,width,height)
strokeRect(x,y,width,height)
x：矩形起点横坐标
y：矩形起点纵坐标
width：矩形的宽度
height：矩形的⾼度
1// 矩形
2function demo2(id){
3var canvas = ElementById(id);
4 var context = Context("2d");
5
6// 1排1----默认填充为⿊⾊ fillStyle = "#000"
7 context.fillRect(20, 20, 60, 60);
8// 1排2----默认边框为⿊⾊ strokeStyle = "#000"
9 context.strokeRect(100, 20, 60, 60);
10
11// 2排----⾃定义填充⾊和边框颜⾊
12 context.fillStyle = "#0000ff";
13 context.strokeStyle = "#ff0000";
14
15 context.fillRect(20, 100, 60, 60); //蓝⾊填充矩形
16
17 context.strokeRect(100, 100, 60, 60); //红⾊边框矩形
18
19 context.lineWidth = 10; //设置边框线框
20 context.strokeRect(180, 100, 60, 60); //加粗边框矩形
21
22// 3排----清除20*20的矩形区域
23 context.fillStyle = "#00ff00";
24
25 context.fillRect(20, 180, 60, 60);
26 context.clearRect(30, 190, 20, 20);
27
28// 4排----给矩形添加透明度
29 context.fillStyle = "rgba(0,255,0,0.2)";
30 context.strokeStyle = "rgba(0,255,0,0.2)";
31
32 context.fillRect(20, 260, 60, 60); //变浅的红⾊填充矩形
33
34 context.lineWidth = 10; //设置边框线框，0.2的透明度不易观察
35 context.strokeRect(100, 260, 60, 60); //变浅的红⾊边框矩形
36 }
【注】：
1. 起点☞指的是矩形左上⾓的顶点
2. rgba(0, 255, 0, 0.2) 前三个参数为红绿蓝三⾊，最后⼀个参数是透明度参数，参数值范围0~1，接近于0越透明实例结果：
3--绘制圆：
创建圆形⽅法定义：xxx.arc(x,y,radius,startAngle,endAngle,anticlockwise)
x ：圆的中⼼的 x 坐标html5颜代码
y ：圆的中⼼的 y 坐标
r ：圆的半径
sAngle ：起始⾓，以弧度计（弧的圆形的三点钟位置是 0 度）
eAngle ：结束⾓，以弧度计
counterclockwise ：可选。规定应该逆时针还是顺时针绘图。False 为顺时针，true 为逆时针
1// 圆形
2function demo3(id){
3var canvas = ElementById(id);
4 var context = Context("2d");
5
6 context.strokeStyle = "00FF00";
7
8 context.beginPath();
9 context.arc(50, 50, 30, 0, 2*Math.PI, true);
10 context.stroke();
11 }
View Code
【注】：2*Math.PI 就是2∏
实例结果：
1// 填充圆形
2function demo3(id){
3var canvas = ElementById(id);
4 var context = Context("2d");
5
6 context.fillStyle = "#0000ff";
7 context.strokeStyle = "#ff0000";
8
9 context.beginPath();
10 context.arc(50, 50, 30, 0, 2*Math.PI, true);
11 context.closePath();
12 context.stroke();
13 context.fill();
14 }
View Code
实例结果：
1// 同⼼圆
2function demo3(id){
3var canvas = ElementById(id);
4 var context = Context("2d");
5//外圆
6 context.fillStyle = "#0000ff";
7 context.strokeStyle = "#ff0000";
8 context.beginPath();
9 context.arc(50, 50, 40, 0, 2*Math.PI, true);
10 context.closePath();
11 context.stroke();
12 context.fill();
13//内圆
14 context.fillStyle = "pink";
15 context.beginPath();
16 context.arc(50, 50, 20, 0, 2*Math.PI, true);
17 context.closePath();
18 context.fill();
19 }
View Code
实例结果：
4--绘制路径：
context.beginPath()
context.closePath()
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)圆的⾓度 2*Math.PI，1/4⾓度就是Math.PI/4
1// 路径
2function demo4(id){
3var canvas = ElementById(id);
4 var context = Context("2d");
5 // 填充
6 context.beginPath();
7 context.arc(20, 20, 50, 0, Math.PI/2 , false);
8 context.closePath();
9 context.fillStyle = '#0000ff';
10 context.fill();
11// 边框
12 context.beginPath();
13 context.arc(100, 20, 50, 0, Math.PI/2 , false);
14 context.strokeStyle = '#0000ff'
15 context.closePath();
16 context.stroke();
17// 填充+边框
18 context.beginPath();
19 context.arc(180, 20, 50, 0, Math.PI/2 , false);
20 context.strokeStyle = '#0000ff';
21 context.closePath();
22 context.stroke();
23 context.fillStyle = 'rgba(0,0,255,0.2)';
24 context.fill();
25 }
View Code
有边框线实例结果：
// 没有 beginPath(); closePath();
context.arc(100, 100, 50, 0, Math.PI/2 , false);
context.arc(200, 200, 50, 0, Math.PI/2 , false);
context.fillStyle = 'rgba(0,0,255,0.2)';
context.fill();
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论