HTML5移动开发学习笔记之Canvas基础
看的是html5移动开发即学即用这本书，首先学习canvas基础，废话不多说，直接看第一个例子。
代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello html5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 </body>
18 <script type="text/javascript">
19 //canvas对象的取得
20 var canvas=document.getelementbyid("c1");
21 //取得绘图用的上下文对象
22 var ctx=canvas.getcontext("2d");
23 //绘图处理
24 ctx.fillstyle="rgb(255,0,0)";
25 ctx.fillrect(50,50,200,200);
26 ctx.fillstyle="rgba(0,0,255,0.5)";
27 ctx.fillrect(100,100,200,200);
28 <!--alert("hello");-->
29 </script>
30 </html>
复制代码
知识点：
canvas 的基本用法
1）取得canvas对象
2）从canvas对象中获取绘图用的上下文
3）使用上下文中的方法与属性进行绘图
颜色的指定方法
1）ctx.fillstyle="#ff0000";
2）ctx.fillstyle="rgb(255,0,0)";
3）ctx.fillstyle="rgba(0,0,255,0.5)"; 最后这个指透明度的。。。
2.路径
绘制一个简单的三角形，效果：
代码如下：
复制代码
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello html5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 </body>
18 <script type="text/javascript">
19 //canvas对象的取得
20 var canvas=document.getelementbyid("c1");
21 //取得绘图用的上下文对象
22 var ctx=canvas.getcontext("2d");
23 //路径绘制开始
24 ctx.beginpath();
25 //路径的绘制
26 ctx.moveto(0,0);
27 ctx.lineto(0,290);
28 ctx.lineto(290,290);
29 //路径绘制结束
30 ctx.closepath();
31 //进行绘图处理
32 ctx.fillstyle="rgb(200,0,0)"
33 ctx.fill();
34 <!--alert("hello");-->
35 </script>
36 </html>
复制代码
知识点：
控制路径时使用的方法：
1) beginpath() 重置路径的开始
2) closepath() 关闭到现在为止的路径
3) moveto() 指定绘图开始时的基点（x,y）
4) lineto() 绘制从前一次绘图位置到（x,y）的直线
绘制路径时使用的方法：
1）stroke() 绘制路径
2）fill()填充路径
指定绘图样式时使用的属性
1）fillstyle 指定填充时使用的颜色与样式
2）strokestyle 指定路径的线颜色与样式
3）linewidth 指定路径线的粗细
下面制作一个当用户触摸屏幕时在触摸位置绘制三角形的实例程序 （书上的是用户触摸屏幕时绘制，现在改一下，鼠标移动时在移动的位置绘制三角形）效果：
代码如下：
复制代码
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=320,user-scalable=no" />
6 <style type="text/css">
7 canvas {
8 border-width: 5px;
9 border-style: dashed;
10 border-color: rgba(20, 126, 239, 0.50)
11 }
12 </style>
13
14 </head>
15 <body>
16 hello html5!
17 <canvas id="c1" width="300" height="300" ></canvas>
18 </body>
19
20 <script type="text/javascript">
21
22 function getpointoncanvas(canvas, x, y) {
23 var bbox = canvas.getboundingclientrect();
24 return { x: x - bbox.left * (canvas.width / bbox.width),
25 y: y - bbox.top * (canvas.height / bbox.height)};
26 }
27 //canvas对象的取得
28 var canvas=document.getelementbyid("c1");
29 //取得绘图用的上下文对象
30 var ctx=canvas.getcontext("2d");
31 //设置canvas的onmouse事件
32 canvas.onmousemove=function(event)
33 {
34 //取得鼠标移动处的坐标
35 var x=event.pagex;
36 var y=event.pagey;
37 var canvas=event.target;
38 var loc=getpointoncanvas(canvas,x,y);
39 console.log("mouse down at point(x:"+loc.x+",y:"+loc.y+")");
40
41 var r=math.random()*10+25;
42 //路径指定
43
44 ctx.beginpath();
45 ctx.moveto(loc.x,loc.y);
46 ctx.lineto(loc.x,loc.y+r);
47 ctx.lineto(loc.x+r,loc.y+r);
48 ctx.lineto(loc.x,loc.y);
49
50 //绘图
51 ctx.strokestyle="red";
52 ctx.stroke();
53 };
54 </script>
55 </html>
复制代码
遇到的问题，刚开始取不到鼠标移动处的坐标，借鉴了https://www.jb51.net/html5/89807.html 这里面的方法，把效果做出来了，注意console.log()的运用，看下代码运行时的效果：
3.颜色定义
这一小节感觉书上分得不太合理，我实现以下这个程序是为了熟练下js代码
效果：
代码如下：
复制代码
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=320,user-scalable=no" />
6 <style type="text/css">
7 canvas {
8 border-width: 5px;
9 border-style: dashed;
10 border-color: rgba(20, 126, 239, 0.50)
11 }
12 </style>
13 <script>
14 (function(){
15 window.addeventlistener("load",function(){
16 var ctx=document.getelementbyid("c1").getcontext("2d");
17 //圆1
18 ctx.beginpath();
19 ctx.arc(150,45,35,0,math.pi*2,false);
20 ctx.fillstyle='rgba(192,80,77,0.7)';
21 ctx.fill();
22 ctx.strokestyle='rgba(192,80,77,1)';
23 ctx.stroke();
24
25 //圆2
26 ctx.beginpath();
27 ctx.arc(125,95,35,0,math.pi*2,false);
28 ctx.fillstyle='rgba(155,187,89,0.7)';
29 ctx.fill();
30 ctx.strokestyle='rgba(155,187,89,1)';
31 ctx.stroke();
32
33 //圆3
34 ctx.beginpath();
35 ctx.arc(175,95,35,0,math.pi*2,false);
36 ctx.fillstyle='rgba(128,100,162,0.7)';
37 ctx.fill();
38 ctx.strokestyle='rgba(128,100,162,1)';
39 ctx.stroke();}, false);
40 })();
41 </script>
42 </head>
43 <body>
44 hello html5!
45 <canvas id="c1" width="300" height="150" ></canvas>
46 </body>
47 </html>
复制代码
知识点：
1)描绘轮廓线
ctx.strokestyle="#ff0000";
2)填充轮廓
ctx.fillstyle="#0000ff";
我自己从中练习的知识点应该是
1）匿名函数 (function(){})();的使用
2）window.addeventlistener("load",function(){},false);
4.绘制方法的介绍
1) 绘制圆弧的arc()方法
arc()方法的语法如下：context.arc(x,y,半径,开始角度,结束角度,是否逆时针旋转);
从指定的开始角度开始至结束角度为止，按指定方向进行圆弧绘制。最后的参数为ture时，将按逆时针旋转。角度不是“度”，而是“弧度”。
效果：
代码如下：
复制代码
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello html5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getelementbyid("c1");
19 var ctx=canvas.getcontext("2d");
20
21 //使用颜色填充矩形
22 ctx.fillstyle="#f00ff0";
23 ctx.fillrect(0,0,300,300);
24 //描绘圆弧
25 //路径开始
26 ctx.beginpath();
27 var startangle=0;
28 var endangle=120*math.pi/180;
29 ctx.arc(100,100,100,startangle,endangle,false);
30
31 //绘制处理
32 ctx.strokestyle="#ff0000";
33 ctx.linewidth=3;
34 ctx.stroke();
35 </script>
36 </body>
37 </html>
复制代码
写完后对arc()方法了解多一点了。x,y是圆心的坐标，现在可以想象得出是怎样画出来的。。。
2）绘制圆弧的arcto()方法
arcto()方法的语法如下：
context.arcto(x1,y1,x2,y2,半径);
此方法的功能是，从路径的起点和终点分别向坐标(x1,y1)、(x2,y2)绘制直线后，在绘制指定半径的圆弧。
效果：
代码如下：
复制代码
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello html5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getelementbyid("c1");
19 var ctx=canvas.getcontext("2d");
20
21 //使用颜色填充矩形
22 ctx.fillstyle="#f00ff0";
23 ctx.fillrect(0,0,300,300);
24 //描绘圆弧
25 //路径开始
26 ctx.beginpath();
27 ctx.moveto(20,20);
28 ctx.arcto(290,150,100,280,100);
29 ctx.lineto(20,280);
30
31 //绘制处理
32 ctx.strokestyle="#ff0000";
33 ctx.linewidth=3;
34 ctx.stroke();
35 </script>
36 </body>
37 </html>
复制代码
自己改了下坐标，效果加深对这个方法的理解。。。
3）quadraticcurveto()与beziercurveto()方法
① quadraticcurveto()方法用于绘制二元抛物线，其语法格式如下。
context.quadraticcurveto(cpx,cpy,x,y);
绘制由最后指定的位置开始至坐标(x,y)的曲线。此时，使用控制点为(cpx,cpy)的二元抛物线进行连接，并将位置(x,y)追加到路径中。
② beziercurveto()方法用于绘制三元抛物线，语法格式为:
beziercurveto(cp1x,cp1y,cp2x,cp2y,x,y);
绘制由最后指定路径位置至指定位置的曲线。此时，使用控制点分别为(cp1x,cp1y),(cp2x,cp2y)的三元抛物线进行连接，并将位置(x,y)追加到路径中，具体示意图：（qq上对图片的修饰似乎还不够熟练。。。）
代码如下：
复制代码
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello html5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getelementbyid("c1");
19 var ctx=canvas.getcontext("2d");
20
21 //使用颜色填充矩形
22 ctx.fillstyle="#f00ff0";
23 ctx.fillrect(0,0,300,300);
24 //描绘圆弧
25 //路径开始
26 ctx.beginpath();
27 ctx.moveto(20,20);
28 ctx.beziercurveto(100,280,180,280,280,20);
29
30
31 //绘制处理
32 ctx.strokestyle="#ff0000";
33 ctx.linewidth=3;
34 ctx.stroke();
35 </script>
36 </body>
37 </html>
复制代码
4）绘制矩形的rect()方法
语法格式如下：context.rect(x,y,宽度,高度); x,y为矩形左上角坐标
除此之外，canvas中还提供了三种特定的矩形绘制方法；
① context.strokerect(x,y,w,h) 绘制矩形的轮廓
② context.fillrect(x,y,w,h) 填充矩形
③ context.clearrect(x,y,w,h) 清空矩形
这个比较好理解就不做效果演示及代码。
5.绘制渐变效果
线性渐变与圆形渐变
线性渐变就是从左至右（或自上而下）依次显示逐渐变化的颜色。而圆形渐变自圆心向外围逐渐显示变化的颜色。
1）线性渐变
指定线性渐变时使用createlineargradient()方法，具体语法如下：
//先创建canvasgradient对象： canvasgradient=context.createlineargradient(x1,y1,x2,y2); 表示由位置(x1,y1)至位置(x2,y2)显示渐变效果
//然后追加渐变颜色：canvasgradient.addcolorstop(颜色开始的相对位置,颜色); 指定渐变中使用的颜色,第一个参数（开始相对位置）中指定一个数字，从而决定什么位置使用什么颜色。
举个栗子：
代码为：
复制代码
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello html5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getelementbyid("c1");
19 var ctx=canvas.getcontext("2d");
20
21 //绘图
22 var g=ctx.createlineargradient(0,0,300,0);
23 g.addcolorstop(0,"rgb(255,0,0)"); //开始位置设置为红色
24 g.addcolorstop(1,"rgb(255,255,0)"); //黄色
25 ctx.fillstyle=g;
26 ctx.fillrect(20,20,260,260);
27 </script>
28 </body>
29 </html>
复制代码
2）圆形渐变
绘制圆形渐变时，使用createradialgradient()方法创建对象，同样使用addcolorstop()方法追加渐变颜色。具体语法如下
//创建canvasgradient对象 canvasgradient=context.createradialgradient(x1,y1,r1,x2,y2,r2); 通过参数指定以(x1,y1)为圆心，半径为r1的圆到以(x2,y2)为圆心，半径为r2的圆的渐变效果
// 追加渐变颜色 canvasgradient.addcolorstop(颜色开始的相对位置,颜色);
举个栗子
代码为：
复制代码
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello html5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getelementbyid("c1");
19 var ctx=canvas.getcontext("2d");
20
21 //绘图
22 var g=ctx.createradialgradient(150,150,50,150,150,100);
23 g.addcolorstop(0.3,"red"); //开始位置设置为红色
24 g.addcolorstop(0.7,"yellow");
25 g.addcolorstop(1.0,"blue"); //黄色
26 ctx.fillstyle=g;
27 ctx.fillrect(20,20,260,260);
28 </script>
29 </body>
30 </html>
复制代码
6.绘制图像
canvas 中的图像绘制
图像绘制的基本步骤如下：
1）读取图像文件
2）在canvas中进行绘制
图像读取前，首先创建image对象，在image对象的src属性中指定图像文件所在路径后就可以读取了。读取结束后，触发onload事件，基本语法如下：
var image=new image();
image.src="图像文件路径";
image.onload=function(){//图像读取时的处理}
使用canvas上下文中的drawimage()方法将读取后的image对象绘制在canvas上，实际上是将image对象中的图像数据输出到canvas中。有三种drawimage()方法用于图像的绘制
①直接绘制 context.drawimage(image,dx,dy)
②尺寸修改(resize) context.drawimage(image,dx,dy,dw,dh)
③图像截取 context.drawimage()
第①种方法直接将读取的图像绘制在坐标(dx,dy)处。第②种方法按照新的宽度dw与高度dh将图像绘制在坐标(dx,dy)处。第③种方法是将原图像的一部分截取出后再按指定尺寸绘制在canvas上，从原图像的坐标(sx,sy)开始截取宽(sw),高(sh)的部分图像，然后绘制在canvas上的坐标(dx,dy)处，宽度为dw,高度为dh。
像素处理
canvas与svg以及flash稍有不同，绘制的图形/图像并不能作为对象操作。也就是说使用stroke()或者fill()方法绘制的图形，既不能移动它也不能删除它。如果想操作绘制的图形/图像，使用svg或者flash实现比使用canvas要好。
canvas中绘制的图形/图像作为一个整体的位图保存，因此可以访问各个像素信息。也就是说，可以使用javascript处理canvas上绘制的图像像素信息。这是canvas的一个特色
1）像素处理的api
imagedata=ctx.getimagedata(sx,sy,sw,sh) 返回以(sx,sy)为左上顶点，宽为sw,高为sh的矩形图像-imagedata对象。
ctx.putimagedata(imagedata,dx,dy) 将imagedata所表示的图像绘制在顶点坐标为(dx,dy)处。
简述之，使用getimagedata()方法取出canvas上图像的像素数据，通过javascript加工过这些像素数据后，使用putimagedata方法，重新绘制到canvas中。
imagedata对象是代表图像像素数据的对象。此对象定义了三种属性：
①imagedata.width 图像数据的宽度
②imagedata.height 图像数据的高度
③imagedata.data 图像数据（canvaspixelarray类型）
在javascript中进行像素数据读取，并进行加工与输出时的具体操作是，从imagedata.data中得到canvaspixelarray类型的对象。此对象是保存像素信息的一元数组。但是与javascript的array对象不同，不可对其进行与通常数组一样的操作。
举个栗子：(本例中，当用户将桌面上的图像文件拖动到中后，首先读取图像文件并在浏览器中显示，接着对图像进行黑白变换，在原图的旁边显示变换后的图像)
用户将桌面上的图像文件拖动到浏览器中的界面：
进行黑白变换后的效果：
代码如下：
复制代码
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 body{
7 font-family:宋体,arial,helvetica,sans-serif;
8 font-size:80%;
9 }
10 #dp{
11 width:200px;
12 min-height:70px;
13 border:1px solid #000000;
14 background-color:#eeeeee;
15 padding:len;
16 margin:2em;
17 }
18 #dp img{
19 margin-right:lem;
20 }
21 </style>
22 <script>
23 (function(){
24
25 //拖动区域的p元素
26 var dp=null;
27 //filereader接口对象
28 var reader=null;
29
30 //页面导入时的处理
31 window.addeventlistener("load",function(){
32 //获取拖动区域的p元素
33 dp=document.getelementbyid("dp");
34 //设置dragover事件的事件侦听
35 dp.addeventlistener("dragover",function(evt){
36 evt.preventdefault();},false);
37 //设置drop事件的事件侦听
38 dp.addeventlistener("drop",function(evt){
39 evt.preventdefault();
40 file_droped(evt);},false);
41 },false);
42
43 //文件被拖入时的处理
44 function file_droped(evt)
45 {
46 //清空显示区域
47 while(dp.firstchild)
48 {
49 dp.removechild(dp.firstchild);
50 }
51 //拖动文件的file接口对象
52 var file=evt.datatransfer.files[0];
53 //filereader接口对象
54 reader=new filereader();
55 //非图像文件画像时报错
56 if(!/^image/.test(file.type)){alert("请拖入图像文件");}
57 //导入拖入图像
58 reader.readasdataurl(file);
59 reader.onload=prepare_image;
60 }
61
62 //显示拖入图像文件
63 function prepare_image(evt)
64 {
65 //创建img元素，显示拖入的图像
66 var image=document.createelement("img");
67 image.setattribute("src",reader.result);
68 dp.appendchild(image);
69 //img元素中导入图像文档后进行后续处理
70 image.onload=function(){
71 //获取图像的尺寸
72 var w=parseint(image.width);
73 var h=parseint(image.height);
74 //创建canvas对象，导入图像
75 var canvas=document.createelement("canvas");
76 canvas.width=w;
77 canvas.height=h;
78 var ctx=canvas.getcontext("2d");
79 ctx.drawimage(image,0,0);
80 //取得canvas像素数据
81 var imagedata=ctx.getimagedata(0,0,w,h);
82
83 //进行黑白转换
84 convert_image_to_gray_scale(imagedata.data);
85
86 //替换canvas中的像素数据
87 ctx.putimagedata(imagedata,0,0);
88
89 //显示canvas
90 dp.appendchild(canvas);
91 }
92 }
93
94 //黑白变换函数
95 function convert_image_to_gray_scale(data)
96 {
97 var len=data.length;
98 var pixels=len/4;
99 for(var i=0;i<pixels;i++){
100 //取出r,g,b值
101 var r=data[i*4];
102 var g=data[i*4+1];
103 var b=data[i*4+2];
104
105 //进行黑白变换
106 var t=parseint((11*r+16*g+5*b)/32);
107 //将变换后的像素数据设置到原来数组元素中
108 data[i*4]=t;
109 data[i*4+1]=t;
110 data[i*4+2]=t;
111 }
112 }
113
114 })();
115 </script>
116
117 </head>
118 <body>
119 <p id="dp">
120 <p>将桌面图像文件拖动到此处。</p>
121 </p>
122 </body>
123 </html>
上一篇： 怎样可让乳房健美 营养早餐可是重点
下一篇： 延缓衰老吃什么最好 三类食物最养颜