<canvas>标签就是一块画布。通俗点说,就是用<script>脚本来绘图的草稿纸。ie9以及其他的一些浏览器都支持该标签。
<canvas>本身是没有绘图能力的,所有的绘图操作都必须在javascript中完成。
js在<canvas>上绘图的方式:
(1)获取canvas对象:var c = document.getElementById("xxxxx");
(2)创建context对象:var ctx = c.getContext("2d");
(3)绘制矩形
ctx.fillStyle="XXXX";
ctx.fillRect(0,0,x,y);
绘制直线
ctx.moveTo(0,0);(起点)
ctx.lineTo(x,y);(终点)
在canvas中绘制圆形
ctx.beiginPath();
arc(x,y,r,start,stop);
ctx.stroke();
在canvas中绘制文本
font定义字体 ctx.font="xxxx";
fillText(text,x,y);在canvas上绘制实心的文本;
strockText(text,x,y);在canvas上绘制空心的文本;
绘制线形渐变
var grd = ctx.createLinearGradient(x,y,x1,y1);
grd.addColorStop(0,"red");
grd,addColorStop(1,"yellow");
grd.fillStyle()=grd;
grd.fillRect(x,y,x1,y1);
绘制径向渐变
var grd = ctx.createRadialGradient(x,y,r,x1,y1,r1);
grd.addColorStop(0,"red");
grd,addColorStop(1,"yellow");
grd.fillStyle()=grd;
grd.fillRect(x,y,x1,y1);
放图片var img = document.getElementById("id");
img.onload = function(){
ctx.drawImage(img,10,10);
}