| 玩转html5画图 | 您所在的位置：网站首页 › 用html绘制曲线 › 玩转html5画图 |
玩转html5画图
|
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变（发散） 图形变形（平移、旋转、缩放） 矩阵变换（图形变形的机制） 图形组合 给图形绘制阴影 绘制图像（图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]） 绘制文字 保存和恢复状态（context） 保存文件 结合setInterval制作动画 结语、demo下载
前言 是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 ，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。 温馨提示：以下所有实验请使用最新版的opera 顶部
基本知识 context:一直觉得这个翻译成“上下文”真够蛋疼的，context是一个封装了很多绘图功能的对象，获取这个对象的方法是 var context =canvas.getContext("2d"); 也许这个2d勾起了大家的无限遐想，但是很遗憾的告诉你html5还只是个少女，不提供3d服务。
canvas元素绘制图像的时候有两种方法，分别是 context.fill()//填充 context.stroke()//绘制边框
style:在进行图形绘制前，要设置好绘图的样式 context.fillStyle//填充的样式 context.strokeStyle//边框样式
context.lineWidth//图形边框宽度
颜色的表示方式: 直接用颜色名称:"red" "green" "blue" 十六进制颜色值: "#EEEEFF" rgb(1-255,1-255,1-255) rgba(1-255,1-255,1-255,透明度)
和GDI是如此的相像，所以用过GDI的朋友应该很快就能上手 顶部
绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height) x:矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点，后面写到变形的时候你就懂了，现在暂时不用关系） y:矩形起点纵坐标 width:矩形长度 height:矩形高度   View Code
1 function draw21(id) {
2 var canvas = document.getElementById(id)
3 if (canvas == null)
4 return false;
5 var context = canvas.getContext("2d");
6 //实践表明在不设施fillStyle下的默认fillStyle=black
7 context.fillRect(0, 0, 100, 100);
8 //实践表明在不设施strokeStyle下的默认strokeStyle=black
9 context.strokeRect(120, 0, 100, 100);
10
11 //设置纯色
12 context.fillStyle = "red";
13 context.strokeStyle = "blue";
14 context.fillRect(0, 120, 100, 100);
15 context.strokeRect(120, 120, 100, 100);
16
17 //设置透明度实践证明透明度值>0,=1时为纯色，值0,=1时为纯色，值= 4) {
16 i = 0;
17 }
18 var ptrn = context.createPattern(image, type[i]);
19 context.fillStyle = ptrn;
20 context.fillRect(0, 0, 400, 300);
21 i++;
22 }, 1000);
23 };
24 }
图像裁剪：context.clip() context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候 先创建裁剪区域 再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲） 给出圆形和星形的裁剪代码 View Code
1 //图像裁剪
2 function draw15(id) {
3 var canvas = document.getElementById(id);
4 if (canvas == null)
5 return false;
6 var context = canvas.getContext("2d");
7 context.fillStyle = "black";
8 context.fillRect(0, 0, 400, 300);
9 image = new Image();
10 image.onload = function () {
11 drawImg(context,image);
12 }
13 image.src = "Image/html5.jpg"
14 }
15
16 function drawImg(context, image) {
17 //圆形裁剪区
18 //createCircleClip(context)
19 //星形裁剪区
20 create5StarClip(context);
21 context.drawImage(image,0,0);
22 }
23
24 function createCircleClip(context) {
25 context.beginPath();
26 context.arc(200, 150, 100, 0, Math.PI * 2, true);
27 context.closePath();
28 context.clip();
29 }
30
31 function create5StarClip(context) {
32 var n = 0;
33 var dx = 200;
34 var dy = 135;
35 var s = 150;
36 context.beginPath();
37 var x = Math.sin(0);
38 var y = Math.cos(0);
39 var dig = Math.PI / 5 * 4;
40 for (var i = 0; i < 5; i++) {
41 var x = Math.sin(i * dig);
42 var y = Math.cos(i * dig);
43 context.lineTo(dx + x * s, dy + y * s);
44 }
45 context.closePath();
46 context.clip();
47 }
像素处理： 获取像素颜色数组： var imagedata=context.getImageData(sx,sy,sw,sh) sx:cavas的x轴坐标点 sy:canvas的y轴坐标点 sw:距离x的宽度 sh:距离y的高度 可以利用context.getImageData返回的一个像素颜色数组，顺序是所取像素范围的从左到右，从上到下，数组的元素是（所有图形，包括图片，和绘制的图形）每个像素的rgba [r1,g1,b1,a1,r2,g2,b2,a2...]
设置像素颜色：context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight) 对imagedata数组中的各个像素的r、g、b、a值进行修改，再调用putImageData方法进行绘制 imagedata:修改后的imagedata dx:重绘图像的起点横坐标（重绘的起点和原来的图像一致的话就会把原来的图形覆盖掉，看起来就像是原来的图像变成现在的图像一样） dy:重绘图像的起点纵坐标 //以下可选参数，设置重绘的矩形范围，如果缺省，默认会重绘所有的imegedata dirtyX:矩形左上角x轴坐标 dirtyY:矩形左上角y轴坐标 dirtyWidth:矩形长度 dirtyHeight:矩形高度
View Code
1 function draw16(id) {
2 var canvas = document.getElementById(id);
3 if (canvas == null)
4 return false;
5 var context = canvas.getContext("2d");
6 context.fillStyle = 'red'
7 //在右下角画一个正方形
8 context.fillRect(250,250,150,50);
9 var image = new Image();
10 image.src = "Image/html5.jpg";
11
12 image.onload = function () {
13 //在左上角画一幅图片
14 context.drawImage(image, 0, 0,200,200);
15
16 //实验证明imagedata取的是canvas所在范围画的图形，不止是图片
17 //不会取该区域内是空白的canvas的像素
18 var imagedata = context.getImageData(0, 0, 400, 300);
19
20 //修改imagedata
21 for (var i = 0, n = imagedata.data.length; i < n; i += 4) {
22
23 imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;
24 imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green
25 imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue
26 //imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a
27 }
28 context.putImageData(imagedata, 0, 0);
29 }
30 }
顶部
绘制文字 填充文字：context.fillText(text,x,y) 绘制文字轮廓 context.strokeText(text,x,y) text:要绘制的文字 x:文字起点的x坐标轴 y:文字起点的y坐标轴 context.font:设置字体样式 context.textAlign:水平对齐方式 start、end、right、center context.textBaseline:垂直对齐方式 top、hanging、middle、alphabetic、ideographic、bottom var length=contexasureText(text):计算字体长度(px)那么能不能计算高度啊，很遗憾，不能 View Code
1 function draw17(id) {
2 var canvas = document.getElementById(id);
3 if (canvas == null)
4 return false;
5 var context = canvas.getContext("2d");
6 context.fillStyle = "#EEEEFF";
7 context.fillRect(0,0,400,300);
8 context.fillStyle = "#00f";
9 context.font = "italic 30px sans-serif";
10 context.textBaseline = 'top';
11 //填充字符串
12 var txt="fill示例文字"
13 context.fillText(txt, 0, 0);
14 var length=contexasureText(txt);
15 context.fillText("长" + length.width + "px", 0, 50);
16 context.font = "bolid 30px sans-serif";
17 txt = "stroke示例文字";
18 length = contexasureText(txt);
19 context.strokeText(txt,0,100);
20 context.fillText("长" + length.width + "px", 0, 150);
21 }
顶部
保存和恢复状态 保存：context.save() 恢复：context.restore() 在上面的裁剪图片提过，一旦设定了裁剪区域，后来绘制的图形都只显示裁剪区域内的内容，要“取消”这个裁剪区域才能正常绘制其他图形，其实这个“取消”是利用save（）方法和restore（）方法来实现的。 context.save()：调用该方法，会保存当前context的状态、属性（把他理解成游戏存档） context.restore():调用该方法就能恢复到save时候context的状态、属性（游戏回档） View Code
1 function draw18(id) {
2 var canvas = document.getElementById(id);
3 if (canvas == null)
4 return false;
5 var context = canvas.getContext("2d");
6 context.fillStyle = "red";
7 context.save(); //保存了当前context的状态
8 context.fillStyle = "black";
9 context.fillRect(0, 0, 100, 100);
10 context.restore();//恢复到刚刚保存的状态
11 context.fillRect(0,120,100,100);
12 }
顶部
保存文件 canvas.toDataURL(MIME) 在canvas中绘出的图片只是canvas标签而已，并非是真正的图片，是不能右键，另存为的，我们可以利用canvas.toDataURL()这个方法把canvas绘制的图形生成一幅图片，生成图片后，就能对图片进行相应的操作了。 View Code
1 function draw19(id) {
2 var canvas = document.getElementById(id);
3 if (canvas == null)
4 return false;
5 var context = canvas.getContext("2d");
6 context.fillStyle = "rgb(0,0,225)";
7 context.fillRect(0, 0, canvas.width, canvas.height);
8 context.fillStyle = "rgb(255,255,0)";
9 context.fillRect(10, 20, 50, 50);
10 //把图像保存到新的窗口
11 var w=window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height=350");
12 }
顶部
结合setInterval制作动画 基本原理就是定时清除整个canvas重新绘制，下面给出“我弹、我弹、我弹弹弹”的代码 （额、名字而已） 小矩形在矩形区域移动，碰到矩形区域的边缘反弹 View Code
1 function draw20(id) {
2 var canvas = document.getElementById(id);
3 if (canvas == null)
4 return false;
5 var context = canvas.getContext("2d");
6
7 var interal = setInterval(function () {
8 move(context);
9 }, 1);
10 }
11
12 var x = 100;//矩形开始坐标
13 var y = 100;//矩形结束坐标
14 var mx = 0;//0右1左
15 var my = 0; //0下1上
16 var ml = 1;//每次移动长度
17 var w = 20;//矩形宽度
18 var h = 20;//矩形高度
19 var cw = 400;//canvas宽度
20 var ch = 300; //canvas高度
21
22
23 function move(context) {
24 context.clearRect(0, 0, 400, 300);
25 context.fillStyle = "#EEEEFF";
26 context.fillRect(0, 0, 400, 300);
27 context.fillStyle = "red";
28 context.fillRect(x, y, w, h);
29 if (mx == 0) {
30 x = x + ml;
31 if (x >= cw-w) {
32 mx = 1;
33 }
34 }
35 else {
36 x = x - ml;
37 if (x = ch-h) {
44 my = 1;
45 }
46 }
47 else {
48 y = y - ml;
49 if (y |
【本文地址】