html5学习笔记：canvas

1.什么是canvas?

可以绘制图形的标签。一般用javascript来绘制。

2.创建一个画布

1 <!DOCTYPE html>2 <html>3 <head>4   <title></title>5 </head>6 <body>7   <canvas id="mycanvas" width="100" height="100"></canvas> //创建画布用canvas标签8 </body>9 </html>

3.在画布上绘图。

 1 <script type="text/javascript"> 2   //用javascript来绘制图像 3   //获取到canvas元素 4   var can=document.getElementById("mycanvas"); 5   //创建html5的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 6   var draw=can.getContext("2d"); 7   //fillStyle();可以是css的颜色，渐变，图案 8   draw.fillStyle="red"; 9   //fillRect(x,y,width,height) 定义填充方式10   draw.fillRect(0,0,125,12);12   </script>

4.canvas-路径

 1 var can=document.getElementById("mycanvas"); 2   var draw=can.getContext("2d"); 3   // 开始一个路径 4   draw.beginPath(); 5   // 设置线的粗细 6   draw.lineWidth="5"; 7   //设置线的颜色 8   draw.stroke; 9   // 线的起点10   draw.moveTo(0,75);11   //线的终点 12   draw.lineTo(250,75);13   // 开始绘制路径14   draw.stroke();15   //开始另一个路径16   draw.beginPath();17   // 设置线的粗细18   draw.lineWidth="5";19   draw.stroke;20   draw.moveTo(25,05);21   draw.lineTo(35,25);22   draw.stroke();

效果：