Canvas画图
直线
//1.确定画布
**************************************************************
矩形
//绘制矩形
ctx.rect(10,10,40,20);
ctx.stroke();
//边框颜色
ctx.strokeStyle="#8A2BE2";
//无填充矩形
ctx.strokeRect(10,10,40,30);
//填充颜色
ctx.fillStyle="#FF7F50";
//填充矩形
ctx.fillRect(50,40,40,40);
***************************************************************
圆弧
var radius=30;//半径
var startAngle=0;//开始角
var endAngle=2*Math.PI;//结束角
ctx.beginPath();//开始画图
//圆中心的x坐标 y坐标 半径长度 开始角 结束角 是否逆时针旋转
ctx.arc(50,50,radius,startAngle,endAngle,false);
ctx.stroke();
**************************************************************
放射性渐变
//定义一个放射渐变 createRadialGradient
var gradient=ctx.createRadialGradient(100,100,10,100,100,100);
//定义渐变色格式
gradient.addColorStop(0,"green");
gradient.addColorStop(0.4,"yellow");
gradient.addColorStop(1,"red");
//开始画图
ctx.beginPath();
//画圆
ctx.arc(100,100,90,0,2*Math.PI,false);
//填充定义格式
ctx.fillStyle=gradient;
//绘制边框
ctx.stroke();
//填充
ctx.fill();
***************************************************
线性渐变
var canvas=document.getElementById("tupian");
var ctx=canvas.getContext("2d");
//定义线性渐变
var linegrad=ctx.createLinearGradient(0,0,200,200);
linegrad.addColorStop(0,"green");
linegrad.addColorStop(0.5,"red");
linegrad.addColorStop(1,"purple");
//开始画图
ctx.beginPath();
ctx.fillStyle=linegrad;
ctx.fillRect(0,0,300,200);
******************************************************************
绘制图片
确定画布
image引用图片
img。onload//图像加载完毕后开始画图
//ctx.drawImage(img,40,40);//图片 x坐标 y坐标
//ctx.drawImage(img,0,0,500,600);//图片 x坐标 y坐标 图片宽 图片高
//img图片 前四个数字 sx sy图片的左上角坐标 sw sh裁剪区域大小
//后四个数字表示裁剪完图片在画布上位置和大小
ctx.drawImage(img,0,0,130,130,0,0,100,100);
************************************************************************
绘制文字
确定画布
生成填充风格
确定字体
填充文字
************************************************************************
绘图保存与撤销（先进后出的栈）
ctx.save();//保存 ctx.restore();//返回
************************************************************************
图像操作 画布的移动变形操作
//变形
ctx.translate(200,200);//画布移动
ctx.rotate(Math.PI/4);//画布旋转
ctx.scale(0.5,0.5);//画布缩小
************************************************************************
计时器
var timer=setInterval(function(){ //定时执行事件，一般多次执行
count--;
div1.innerHTML=count;
if(count<=0){
//清除定时器
clearInterval(timer);
}
},1000);
setTimeout(function(){ //只执行一次的计时器
count--;
div1.innerHTML=count;
},1000)