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; ipixels; 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>
1.第一个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; ipixels; 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教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5移动开发学习笔记之Canvas基础
本文地址: https://pptw.com/jishu/586375.html