canvas基本介绍_H5之家 - 中国HTML5教程资源分享第一站

首先是html5中canvas的是如何布置的，和一般的html标签一样canvas也是html中的一个标签，也可以通过js像操作dom树上的元素一样来操作canvas，如下定义canvas标签：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <canvas>浏览器不支持html5<canvas> 9 </body> 10 </html>

我们也可以给canvas添加style属性，添加canvas的宽和高，canvas就好像一快画布，我们可以用css向操作div一样来操作这块画布的起始状态，只有先确定canvas画布的状态，才可以用js在这块画布上创作画作。

1 <canvas>

这样我们就准备好了一张长宽都为400的画布。

现在canvas标签已经定义好了，我们该怎么来在这张空白的纸上画上需要的图形呢？

我们都知道画家要画出一幅美丽的图画，我们不管这位画家的画工有多好，彩笔有多么的丰富，画布有多么的好。至少这位画家要拿到这个画布（要把画布放到面前）才可以在上面作画。

canvas也一样，我们需要利用js拿到这块画布，才能绘制图形，js如下定义

1 var canvas=document.getElementById("canvas");

我们前面说过，canvas的js操作，和对普通的标签操作一样，我们也需要用document拿到canvas标签的控制权

我们拿到canvas之后呢，我们拿到画布当然是对画布进行绘制了。canvas有2d和3d画布的区别我们要在这边先定义下，我们把canvas表示为2d画布（我们讲的就是2维空间的绘制，以后有空会讲一讲3d的部分）

1 var context=canvas.getContext('2d');

利用这段代码我们就可定义一个二维的画布了，现在我们就在这个二维画布context上进行创作了。

我们下边来绘制一个五角星：下面就是完整的绘制五角星的代码。

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <canvas></canvas> 9 </body> 10 11 12 <script> 13 var WINDOW_WIDTH=1024; //画布宽度 14 var WINDOW_HEIGHT=568; //画布高度 15 window.onload=function(){ 16 var canvas=document.getElementById("canvas"); 17 canvas.width=WINDOW_WIDTH; 18 canvas.height=WINDOW_HEIGHT; 19 var context=canvas.getContext('2d'); 20 drawStar(context,400,300,150,300,0) 21 22 23 24 25 } 26 function drawStar(cxt,x,y,r,R,ret){ //绘制五角星,偏移量x，y。大小圆半径r,R.旋转角度，正的表示顺时针，负的表示逆时针 27 cxt.beginPath(); 28 for(var i=0;i<5;i++){ 29 cxt.lineTo(Math.cos((18+72*i)/180*Math.PI+ret)*R+x, 30 -Math.sin((18+72*i)/180*Math.PI+ret)*R+y); //绘制大圆上的点 31 cxt.lineTo(Math.cos((54+72*i)/180*Math.PI+ret)*r+x, 32 -Math.sin((54+72*i)/180*Math.PI+ret)*r+y); //绘制小圆上的点 33 } 34 cxt.closePath(); 35 cxt.stroke(); 36 } 37 </script> 38 </html>

今天这部分主要是对canvas的基础的了解，下一节，我来讲下直线，多边形的绘制。