玩转html5 的 canvas画图_H5之家 - 中国HTML5教程资源分享第一站

导航

前言

<canvas></canvas>是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：矩形高度

function draw21(id) { var canvas = document.getElementById(id) if (canvas == null) return false; var context = canvas.getContext("2d"); //实践表明在不设施fillStyle下的默认fillStyle=black context.fillRect(0, 0, 100, 100); //实践表明在不设施strokeStyle下的默认strokeStyle=black context.strokeRect(120, 0, 100, 100); //设置纯色 context.fillStyle = "red"; context.strokeStyle = "blue"; context.fillRect(0, 120, 100, 100); context.strokeRect(120, 120, 100, 100); //设置透明度实践证明透明度值>0,=1时为纯色，值<=0时为完全透明 context.fillStyle = "rgba(255,0,0,0.2)"; context.strokeStyle = "rgba(255,0,0,0.2)"; context.fillRect(240,0 , 100, 100); context.strokeRect(240, 120, 100, 100); }

清除矩形区域

context.clearRect(x,y,width,height)

x：清除矩形起点横坐标

y：清除矩形起点纵坐标

width：清除矩形长度

height：清除矩形高度

function draw22(id) { var canvas = document.getElementById(id) if (canvas == null) return false; var context = canvas.getContext("2d"); //实践表明在不设施fillStyle下的默认fillStyle=black context.fillRect(0, 0, 100, 100); //实践表明在不设施strokeStyle下的默认strokeStyle=black context.strokeRect(120, 0, 100, 100); //设置纯色 context.fillStyle = "red"; context.strokeStyle = "blue"; context.fillRect(0, 120, 100, 100); context.strokeRect(120, 120, 100, 100); //设置透明度实践证明透明度值>0,=1时为纯色，值<=0时为完全透明 context.fillStyle = "rgba(255,0,0,0.2)"; context.strokeStyle = "rgba(255,0,0,0.2)"; context.fillRect(240, 0, 100, 100); context.strokeRect(240, 120, 100, 100); context.clearRect(50, 50, 240, 120); }

圆弧

context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

x：圆心的x坐标

y：圆心的y坐标

straAngle：开始角度

endAngle：结束角度

anticlockwise：是否逆时针（true）为逆时针，(false)为顺时针

ps：经过试验证明书本上ture是顺时针，false是逆时针是错误的，而且无论是逆时针还是顺时针，角度都沿着顺时针扩大，如下图：

function draw0(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext('2d'); context.beginPath(); context.arc(200, 150, 100, 0, Math.PI * 2, true); //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果 context.closePath(); context.fillStyle = 'rgba(0,255,0,0.25)'; context.fill(); }

一不小心画了小日本的国旗...赶紧调下颜色和大小，绿色倒是挺合适的~

路径

context.beginPath() context.closePath()

细心的朋友会发现上面的画圆并不单单是直接用arc还用到了context的beginPath 和closePath方法，参考书不愧是参考书，例子给得太简单了，实话说一开始我凌乱了，耐心下来做了几个实验才舒缓蛋疼的心情

实验代码如下，通过分别注释closePath 和beginPath看fillstoke 和fill stroke结合下画出来的两个1/4弧线达到实验效果

function draw23(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext('2d'); var n = 0; //左侧1/4圆弧 context.beginPath(); context.arc(100, 150, 50, 0, Math.PI/2 , false); context.fillStyle = 'rgba(255,0,0,0.25)'; context.fill(); context.strokeStyle = 'rgba(255,0,0,0.25)' context.closePath(); context.stroke(); //右侧1/4圆弧 context.beginPath(); context.arc(300, 150, 50, 0, Math.PI/2 , false); context.fillStyle = 'rgba(255,0,0,0.25)'; context.fill(); context.strokeStyle = 'rgba(255,0,0,0.25)'; context.closePath(); context.stroke(); }

实验结果如下：