html5 canvas 路径,html5 canvas基础(1)--路径

html5 canvas API

window.οnlοad=function(){

var canvas = document.getElementById('can');

//找不到元素的处理

if (canvas==null){

console.info('canvas元素不存在..');

return false;

}

/**

* 获取上下文(2d)平面图

* @type {CanvasRenderingContext2D}

*/

var context = canvas.getContext('2d');

//设置填充样式

context.fillStyle="yellow";

//填充一个矩形，无背景色

context.fillRect(10,10,250,250);

//填充样式，颜色英文,rgb,十六进制数均可以

context.fillStyle="green";

//填充一个矩形

context.fillRect(140,140,250,250);

//设置图形边框的样式

context.strokeStyle="red";

//边框线宽

context.lineWidth=10;

//绘制一个矩形(x,y,w,h) 在坐标(x,y)处绘制宽和高为(w,h)的矩形

context.strokeRect(100,100,200,200);

//清除矩形，擦除指定区域中的图像，让其背景变为透明

context.clearRect(100,100,200,200);

/**

* 绘制圆形或者圆弧

* */

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

//开始创建路径

context.beginPath();

/**

* arc有六个参数(x,y,radius,startAngle,endAngle,anticlockwise)

* (起点横坐标,起点纵坐标,圆形(弧)的半径,开始角度，结束角度,是否顺时针方向绘制)

*/

context.arc(35*i,35*i,i*6,0,Math.PI*2,true);

//关闭路径,路径的绘制工作完成,还没开始绘制图像

context.closePath();

///填充颜色

context.fillStyle='rgba(245,0,0,0.5)';

//填充图形

context.fill();

}

/**

* 绘制一个圆弧

*/

context.beginPath();

context.arc(300,300,100,90,120,true);

context.closePath();

context.fillStyle="pink";

context.fill();

var can= document.getElementById("line");

/**

*

* @type {CanvasRenderingContext2D}

*/

var ctx =can.getContext('2d');

ctx.fillStyle='rgb(100,200,210)';

ctx.fillRect(0,0,350,350);

var m=0;

var nx=100;

var ny=100;

var s=100;

ctx.beginPath();

ctx.fillStyle='rgb(200,240,210)';

ctx.strokeStyle="rgb(0,0,123)";

var $x=Math.sin(0);

var $y=Math.cos(0);

var $d=Math.PI/15*11;

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

var $x=Math.sin($d*i);

var $y=Math.cos($d*i);

ctx.lineTo(nx+$x*s,ny+$y*s);

}

ctx.closePath();

ctx.fill();

ctx.stroke();

}

您的浏览器不支持canvas！

您的浏览器不支持canvas！

复制代码