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.strokestyle=green; 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.strokestyle=purple;20 draw.moveto(25,05);21 draw.lineto(35,25);22 draw.stroke();
效果：