html5 canvas

标签：

Notice:
1、canvas的长宽设置方法：width,heigth,而不是style="width...height..."
 
获取canvas对象：var c = document.getElementById("myCanvas");
获取2D图形对象：var ctx = c.getContext("2D");
ctx.fillStyle="" 设置填充颜色
ctx.fillRext(x,y,width,height) 绘制矩形
ctx.arc(x,y,R,start,stop); 绘制圆形(start,stop:弧度开始位置和结束位置)
example: ctx.arc(100,100,50,0,2*Math.PI);

//以下省略2D图形对象
moveTo(x,y) 画笔移动到此位置
lineTo(x,y) 画笔以线段的方式移动到此位置
stroke() 绘制
beginPath() ?

//canvas绘制文本
font = "30px Arial" 设置字体大小和样式
fillText(text,x,y) 绘制实心文本
strokeText(text,x,y) 绘制空心文本

//canvas 线性渐变
grd = ctx.createLinearGradient(x,y,x1,y1)
grd.addStopColor(stop,color) 介于0.0 与1.0之间的值，表示渐变中开始与结束之间的位置
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"red");
ctx.fillStyle = grd;
ctx.fillRext(x,y,width,height);

//canvas 绘制径向、圆渐变
createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
http://imatlas.com/posts/canvas-createradialgradient/

//cnacas 图像
drawImage(image,x,y)

html5 canvas

标签：

原文地址：http://www.cnblogs.com/hzj680539/p/5059038.html