canvas知识点总结3

标签：

context.clearRect(0,0,width,height);//对一个矩形画面进行刷新

context.beginPath();//起始路径

context.moveTo(100,100);

context.lineTo(700,700);//起始坐标为100,100，终点坐标为700,700

context.lineTo(100,700);

context.lineTo(100,100);

context.clostPath();//路径结束，如果没有这行代码时，图形不封闭则不会自动封闭 context.lineWidth=5;//线条宽度为5个像素

context.strokeStyle="#005588"//线条颜色

context.stroke();//执行线条绘制

/*

context.fillStyle="rgb(2,100,30)"//填充颜色

context.fill();//执行填充

*/

context.beginPath();//起始路径

context.moveTo(200,200);

contex.lineTo(700,600);

context.clostPath();

context.strokeStyle="black"

context.stroke();

//绘制弧形和圆形

contex.arc(

centerx,centery,radius,//圆心坐标和半径

startAngle,endingAngle,//其实弧度和终止弧度

anticlockwise=true//值为true是为逆时针绘制

)

context.arc(300,200,200,0,1.5*Math.PI,true);//圆心坐标300,200，半径200，其实弧度0，终止弧度为1.5派，逆时针绘制

绘制动画效果

setInterval(

function(){

render();

update();

}

50//时间

);

//绘制二次方贝塞尔曲线

context.strokeStyle="black";

context.beginPath();

context.moveTo(0,200);//起始点

context.quadraticCurveTo(75,50,300,200);//控制点，终点，用户绘制二次方贝塞尔曲线 //context.bezierCurveTo(25,50,75,50,300,200);//前四个为两个控制点，后面为终点坐标 context.globalCompositeOperation="source-over";

//保存canvas状态

context.save();

//回复保存的canvas

context.restore();

context.translate(80,80);//将图形的原点坐标移动到80，80

context.rotate(Math.PI*0.5);//图形旋转

context.scale(0.95,0.95);//缩放图形

//矩阵变换

context.tran sform(m11,m12,m21,m22,dx,dy);

x‘ = (m11)x+(m21)y+dx;

y‘ = (m12)x+(m22)y+dy;

context.globalAlpha = "0.4"//设置图形透明度

context.globalCompositeOperation="source-over";//source-over为默认值，默认新的图形在原的图形之上

context.clip();//裁切路径

lineWidth=value//线段宽度

lineCap=type;//端点类型，butt，round，square//平头，圆头，方头

lineJoin=type;//两条线段连接点的效果round,bevel,miter//圆角，方角，直角 //创建阴影

context.shadowOffsetX=float;//x轴偏移

context.shadowOffsetY=float;//y轴偏移

context.shadowBlur=float;//阴影羽化程度

context.shadowColor=color;//阴影颜色，默认为黑色

//插入图片

var img = new Image();

img.src = ‘img/icon.png‘;

var ptrn = context.createPattern(img,‘repeat‘);

context.fillStyle =ptrn;

//绘制线性渐变

var liner = contex.createLinearGradient(0,0,0,200);//起始坐标和宽度

addColorStop(0.5，‘#ff0000‘);

//绘制径向渐变

context.createRadialGradient(x1,y1,r1,x2,y2,r2);//初始圆心坐标和半径，终点圆心坐标和

canvas知识点总结3

标签：

原文地址：http://www.cnblogs.com/tu-8/p/5679304.html