脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5移动开发学习笔记之Canvas基础，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
看的是HTML5移动开发即学即用这本书，首先学习Canvas基础，废话不多说，直接看第一个例子。
代码如下：
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>
看的是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>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的html5教程-HTML5移动开发学习笔记之Canvas基础全部内容，希望文章能够帮你解决html5教程-HTML5移动开发学习笔记之Canvas基础所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。