canvas实例 扫地僧 北邮 web 前端课程之 Canvas 画布(8)

ctx.translate(75-Math.floor(Math.random()*150),

75-Math.floor(Math.random()*150));

drawStar(ctx,Math.floor(Math.random()*4)+2);

ctx.restore();

}

}

function drawStar(ctx,r){

ctx.save();

ctx.beginPath()

ctx.moveTo(r,0);

for (var i=0;i<9;i++){

ctx.rotate(Math.PI/5);

if(i%2 == 0) {

ctx.lineTo((r/0.525731)*0.200811,0);

} else {

ctx.lineTo(r,0);

}

}

ctx.closePath();

ctx.fill();

ctx.restore();

}

（4）辅助方法&mdash;--判断点是否在路径里

调用格式：

context . isPointInPath(x, y)

方法概述：

给定的坐标(x,y)是否在当前路径中，坐标（x，y）为绘图坐标系坐标，并不受转换的影响。

（5）moveTo 方法

调用格式：

context . moveTo(x, y)

方法概述：

建立新的子路径，并制定其第一个点为(x,y)。

（6）lineTo 方法

调用格式：

context . lineTo(x, y)

方法概述：

如果绘图上下文没有子路径，则其等同于 moveTo(x,y),否则，其建立一条在子路径最后一个点到给定点的直线，并增加(x,y)到子路径中。

(7) rect 方法调用格式：

context . rect(x, y, w, h)

方法概述：

本方法建立二个新的子路径， 第一个子路径包含四个点: （x， y） ，（x+w，y） ， （x+w，y+h） ， （x，y+h） ，四个点的连接方式为直线，该子路径被标示为闭合路径；最后再增加一个子路径，其仅有一个点(x，y)。

（8）圆弧

方法调用格式：

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

方法概述：本方法先增加一条直线到子路径列表，然后增加一个圆弧子路径到子路径列表。直线子路径是由上一个点到圆弧子路径的起始点，而圆弧则为按照给定的开始角度、结束角度和半径描述的按照给定的方向[布尔类型，anticlockwise-逆时针（true）]圆弧上；假如半径为负值，抛出 INDEX_SIZE_ERR 的异常；

JS 代码：

context.beginPath();

context.moveTo(100,50);

context.arc(250,50,50,1.5708,3.14,true);

context.stroke();

注释掉 moveTo 语句，则仅仅绘制圆弧:

（9）最短圆弧

方法调用格式：

context . arcTo(x1, y1, x2, y2, radius)

方法概述：本方法绘制出子路径最后一个点(x0,y0)和（x1,y1）以及(x1,y1)和（x2,y2）构成的两条直线间半径为 radius 的最短弧线，并用直线连接(x0,y0)；假如半径为负值，抛出 INDEX_SIZE_ERR 的异常；

JS 代码如下：

context.beginPath();

context.moveTo(150,50);

context.arcTo(200,50,100,200,20);

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-64819-8.html