您的位置：首页 > Web前端 > HTML

11-22-HTML-canvas太极练习

2017-11-22 12:00 295 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>太极</title>
<script>
function draw(){
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');

//大圆
ctx.beginPath();
ctx.strokeStyle="#000000";
ctx.lineWidth=1;
var color=ctx.createLinearGradient(500,300,500,700);
color.addColorStop(0,"#ffffff");//由白渐变到黑
color.addColorStop(1,"#000000");
ctx.fillStyle=color;
ctx.arc(500,500,200,Math.PI*0.5,Math.PI*1.5,false);
ctx.stroke();
ctx.fill();
ctx.closePath();

ctx.beginPath();
var color=ctx.createLinearGradient(500,300,500,700);//a（a和b只需要一个改变就可以）
color.addColorStop(0,"#000000");//b
color.addColorStop(1,"#ffffff");//由黑渐变到白
ctx.fillStyle=color;
ctx.arc(500,500,200,Math.PI*1.5,Math.PI*0.5,false);
ctx.stroke();
ctx.fill();
ctx.closePath();

//中半圆

ctx.beginPath();
var color=ctx.createLinearGradient(500,300,500,700);
color.addColorStop(0,"#000000");//由黑渐变到白
color.addColorStop(1,"#ffffff");
ctx.fillStyle=color;
ctx.arc(500,400,100,Math.PI*0.5,Math.PI*1.5,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.beginPath();
var color=ctx.createLinearGradient(500,300,500,700);
color.addColorStop(0,"#ffffff");//由白渐变到黑
color.addColorStop(1,"#000000");
ctx.fillStyle=color;
ctx.arc(500,600,100,Math.PI*1.5,Math.PI*0.5,false);
ctx.stroke();
ctx.fill();
ctx.closePath();

//小圆
ctx.beginPath();
var radgrad=ctx.createRadialGradient(450,400,1,450,400,30);
radgrad.addColorStop(0,"#ffffff");
radgrad.addColorStop(1,"#000000");//黑色
ctx.fillStyle=radgrad;
ctx.arc(450,400,20,0,Math.PI*2,false);
ctx.stroke();
ctx.fill();
ctx.closePath();

ctx.beginPath();
var radgrad=ctx.createRadialGradient(550,600,1,550,600,30);
radgrad.addColorStop(0,"#000000");//黑色
radgrad.addColorStop(1,"#ffffff");
ctx.fillStyle=radgrad;
ctx.arc(550,600,20,0,Math.PI*2,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
}
</script>

</head>

<body onLoad="draw()">
<canvas id="mycanvas" width="1000" height="1000">
</canvas>
</body>
</html>

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航