html5学习笔记：canvas_H5之家 - 中国HTML5教程资源分享第一站

[摘要]本文是对html5学习笔记：canvas的讲解，对学习CSS编程技术有所帮助,与大家分享。

1.什么是canvas?

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

2.创建一个画布

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <canvas></canvas> //创建画布用canvas标签 </body> </html>

3.在画布上绘图。

4.canvas-路径

var can=document.getElementById("mycanvas"); var draw=can.getContext("2d"); // 开始一个路径 draw.beginPath(); // 设置线的粗细 draw.lineWidth="5"; //设置线的颜色 draw.strokeStyle="green"; // 线的起点 draw.moveTo(0,75); //线的终点 draw.lineTo(250,75); // 开始绘制路径 draw.stroke(); //开始另一个路径 draw.beginPath(); // 设置线的粗细 draw.lineWidth="5"; draw.strokeStyle="purple"; draw.moveTo(25,05); draw.lineTo(35,25); draw.stroke();

效果：

// 其他路径的绘制
arc(x,y,r,start,stop); //画圆

5.canvas-文本

1 // 3绘制文本 2 var can=document.getElementById("mycanvas"); 3 var draw=can.getContext("2d"); 4 // 设置字体的大小 5 draw.font="30px Arial"; 6 //绘制出文字，确定文字的位置 7 draw.fillText("Hello World ",10,25); 8 //绘制空心文字 9 draw.strokeText("Hello",10,25);

6.canvas-渐变

var can=document.getElementById("mycanvas"); var draw=can.getContext("2d"); // 创建渐变 // 先创建一个线条渐变 var grd=draw.createLinearGradient(0,0,200,0); // 设置渐变的停止位置,以及颜色 grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); //绘制渐变图形 draw.fillStyle=grd; draw.fillRect(10,10,120,80);
　　　　//圆渐变
　　　　ctx.fillRect(10,10,150,80);