html矩形画圆,html5 canvas绘制矩形和圆形的实例代码

JavaScript Code复制内容到剪贴板

绘制矩形:

绘制圆形：

//绘制矩形

function draw(){

var canvas=document.getElementById('ca'); //获取canvas元素

if (canvas==null)

return false;

var context=canvas.getContext('2d'); //取得上下文

context.fillStyle='#EEEFF';   //填充颜色

context.fillRect(0,0,400,300); //填充矩形 (矩形1)

context.fillStyle='red';

context.strokeStyle='blue'; //边框颜色

context.lineWidth=1;        //边框宽度

context.fillRect(50,50,100,100); //填充矩形(内部矩形2)

context.strokeRect(50,50,100,100); //绘制边框

}

//绘制圆形

function drawarc(){

var canvas2=document.getElementById('yuan'); //获取canvas元素

if (canvas2==null)

if(canvas2==null)

return false;

var context2=canvas2.getContext('2d');  //取得上下文

context2.fillStyle='#EEEEEF';

context2.fillRect(0,0,400,300);

var n=0;

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

context2.beginPath();  //开始创建路径

context2.arc(i*25,i*25,i*10,0,Math.PI*2,true);  //创建圆形路径

context2.closePath();  //关闭路径

context2.fillStyle='Rgba(255,0,0,0.25)'; //设置颜色

context2.fill();  //填充图形

}

}

以上就是小编为大家带来的html5 canvas绘制矩形和圆形的实例代码的全部内容了