canvas画图标签的使用

<canvas id="can" width='500' height='500'>你的浏览器不支持</canvas> //创建一个画布

js:

var c=document.getElementById('can')　　//获取节点
var canvas=c.getContext("2d");　　　　　　//使用2D引擎
canvas.fillStyle="rgba(0,0,255,0.2)";　　   //定义一个颜色
canvas.fillRect(0,0,300,300);　　　　　　  //定义一个矩形

========画线========

canvas.moveTo(10,10)　　　　　　　　//起始位置 //如果没有再次设置起始位置将从结束位置开始画
canvas.lineTo(20,30)　　　　　　　　　//结束位置
canvas.stroke();　　　　　　　　　　  //结束图形

=========画圆=======

canvas.fillStyle="rgba(0,0,255,0.2)";　　   //定义一个颜色
canvas.beginPath();　　　　　　　　　　    //从新开始画，防止冲突重叠
canvas.arc(200,200,30,0,Math.PI*2,true)
canvas.closePath();　　　　　　　　　　　　//结束画布
canvas.fill();　　　　　　　　　　　　　　　 //结束渲染

 ==========渐变色=============

var grd=canvas.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"yellow");
grd.addColorStop(0.5,"blue");
grd.addColorStop(0.5,"green");
canvas.fillStyle=grd;　　　　　　　　　　//将生成的颜色赋值给样式
canvas.fillRect(0,0,175,50);　　

============载入一张图片==============

 var img=new Image()

img.src='logo.png';

canvas.drawImage(img,200,30)