Canvas 绘图 --图形绘制

     Canvas，是屏幕上一个由JavaScript控制的即时模式位图区域，即时模式是指在画布上呈现像素的方式，canvas通过JavaScript调用canvas API，在每一帧中完全重绘屏幕上的位图。我们所要做的就是在每一帧渲染之前设置屏幕的显示内容，这样才能显示正确的像素。下面总结了几种常绘制的图形

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

一、矩形绘制

ctx.fillRect(x,y,width,height); //在位置(x,y)处绘制宽为width，高为height的填充矩形

ctx.strokeRext(x,y,width,height); //在位置(x,y)处绘制一个矩形边框

ctx.fillStyle="#ffffaa";

ctx.strokeStyle="#000000";

二、线段绘制

首先了解线段所拥有的几个点：

（1）开始、结束、绘画

beginPath,closePath,stroke()

（2）lineCap属性 定义上下文中线的端点，butt,round,square

（3）lineJoin属性 定义两条相交线产生的拐角，miter,level,round

（4）linewidth属性 定义线的宽度

（5）strokeStyle属性 定义线和形状边框的颜色和样式

 

1. 圆形端点，斜角连接，在画布左上角

 ctx.strokeStyle = “black”;

ctx.lineWidth = 10;

ctx.lineJoin = “bevel”;

ctx.lineCap = “round”;

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(25,0);

ctx.line(25,25);

ctx.stroke();

ctx.closePath();

2.圆形端点，斜角连接，不在画布左上角

ctx.beginPath();

ctx.moveTo(10,50);

ctx.lineTo(35,50);

ctx.lineTo(35,75);

ctx.stroke();

ctx.closePath();

3.平直端点，圆形连接，不在画布左上角

ctx.lineJoin = “round”;

ctx.lineCap = “butt”;

ctx.beginPath();

ctx.moveTo(10,100);

ctx.lineTo(35,100);

ctx.lineTo(35,125);

ctx.stroke();

ctx.closePath();

 

三、弧形绘制

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x和y定义圆心的位置，radius定义弧线的半径，startAngle和endAngle使用弧度值，而不是角度值，anticlockwise的值可以是true或false，用于定义弧线的方向。例如：绘制一个圆心在（100,100）,半径为20的圆

ctx.arc(100,100,20,(math.PI/180)*0,(Math.PI/180)*360,false)

四、贝塞尔曲线

立方：ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

平方:  ctx.quadraticCurveTo(cpx,cpy,x,y)