标签:
首先是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 id="canvas">浏览器不支持html5<canvas> 9 </body> 10 </html>
我们也可以给canvas添加style属性,添加canvas的宽和高,canvas就好像一快画布,我们可以用css向操作div一样来操作这块画布的起始状态,只有先确定canvas画布的状态,才可以用js在这块画布上创作画作。
1 <canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa;display:block;margin: auto;">
这样我们就准备好了一张长宽都为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 id="canvas" style="display:block;margin: auto;"></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的基础的了解,下一节,我来讲下直线,多边形的绘制。
标签:
原文地址:http://www.cnblogs.com/Mangues/p/4253722.html