标签：rect 贝塞尔 base 移动 应该 弧度 order ack inline
想要使用Canvas，首先要有<canvas>元素。
<canvas id="drawing" width="200" height="200"> Here shows something.</canvas>
然后进入JS文件，先获取这个canvas元素
var drawing=document.getElementById("drawing");然后判断浏览器是否支持<canvas>，这一步很重要。但是有些浏览器比如Firefox3中会为<canvas>创建DOM对象，但是该对象中并没有getContext()方法。所以应该这样判断浏览器是否支持<canvas>
if(drawing.getContext){}这里的context是上下文，所谓上下文就是函数所依赖的外部变量。前面是我总结轮子哥所说的话
★★★★★ 2D上下文
向context传入2D可以获得2D上下文对象，可以绘制简单的2d图形。2D上下文的坐标开始于<canvas>元素的左上角，X越大表示越靠右，Y越大表示越靠下。width和height表示水平和垂直防线可用的像素数目。
★ 填充和描边
var drawing=document.getElementById("drawing"); if(drawing.getContext){ var context=drawing.getContext("2d"); //边框颜色; context.strokeStyle="red"; //填充颜色; context.fillStyle="#0000FF"; }
★ 绘制矩形
var drawing=document.getElementById("drawing"); if(drawing.getContext){ var context=drawing.getContext("2d"); //绘制红色填充矩形; context.fillStyle="#FF0000"; context.fillRect(10,10,50,50); //绘制蓝色半透明填充矩形; context.fillStyle="rgba(0,0,255,0.5)"; context.fillRect(30,30,50,50);
绘制边框线矩形
var drawing=document.getElementById("drawing"); if(drawing.getContext){ var context=drawing.getContext("2d"); //绘制红色填充矩形; context.strokelStyle="#FF0000"; context.strokeRect(10,10,50,50); //绘制蓝色半透明填充矩形; context.strokeStyle="rgba(0,0,255,0.5)"; context.strokeRect(30,30,50,50);
★ 绘制路径
绘制路径前，必须在获得2d上下文之后，调用 context.beginPath() 方法。
//绘制固定圆心画弧线 context.arc(x,y,radius,startAngle,endAngle,counterclockwise) //固定起点以给定的半径画弧线 context.arcTo(x1,y1,x2,y2,radius) //贝塞尔曲线 //从上一点开始绘制，到(x,y)结束，并且以(c1x,c1y)和(c2x,c2y)为控制点 context.bezierCurveTo(c1x,c1y,c2x,c2y,x,y) //从上一点绘制直线到(x,y)为止 context.lineTo(x,y) //将游标移动到(x,y) context.moveTo(x,y) //绘制二次曲线，以(cx,cy)为控制点 context.quadraticCurveTo(cx,cy,x,y) //绘制矩形路径 context.rect(x,y,width,height)
★ 绘制文本
//context.font表示文本样式大小及字体 context.font="bold 14px Arial" //context.textAlign表示文本对齐方式，当属性值分别为 start 和 end，代表从左和从右阅读方式。 context.textAlign="center" //context.textBaseLine表示文本的基线 context.textBaseLine="middle" //fillText(),strokeText()绘制文本，三个参数分别为 要绘制的文本字符串 x坐标 y坐标 最大像素宽度(可选) context.fillText("abc",100,20);
★ 变换
//围绕原点旋转图像angle弧度 rotate(angle) //缩放图像，x方向和y方向分别缩放scaleX和scaleY倍，默认值1.0 scale(scaleX,scaleY) //将坐标原点移动到(x,y) translate(x,y)
★ 保存当前的context设置
context.save();
★ 返回到上一次保存的context设置
context.restore();
标签：rect 贝塞尔 base 移动 应该 弧度 order ack inline
原文地址：http://www.cnblogs.com/lihongli/p/6308761.html
