版权声明:本文纯属原创,未经同意请勿转载。 https://blog.csdn.net/beiluo77/article/details/88353195
H5canvas画圆
今天整理了一下自己的文档,发现之前学的canvas还挺好玩的。
首先是canvas画圆:
它的html代码和CSS代码很简单
<h2>Canvas——画圆</h2>
<canvas id="myCanvas" width="400" height="300"></canvas>
body{
text-align: center;
}
#myCanvas{
border: 1px solid #000;
}
打好框架之后就可以写js文件了。
var c=document.getElementById("myCanvas"); ///获取画布id为myCanvas
var ctx=c.getContext("2d"); //获取绘图2D环境
var w=c.width;
var h=c.height;
ctx.strokeStyle="#ff0000"; //线段颜色
ctx.lineWidth=5;
ctx.arc(w/2,h/2,100,0,2*Math.PI,true); //创建弧/曲线(用于创建圆形或部分圆)
ctx.stroke(); //画直线
这个就是最简单的圆形了。
如果要画同心圆,多个圆环套在一起,可以用循环实现
window.function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var w=c.width;
var h=c.height;
ctx.strokeStyle="#ff0000";//返回笔触的颜色
ctx.lineWidth=2;
for(r=60;r<=140;r+=20)
{
ctx.beginPath();//起始路径
ctx.arc(w/2,h/2,r,0,2*Math.PI,true);//创建弧或曲线
ctx.stroke();//绘制已定义的路径
}
}
或者是渐变的同心圆:
window.function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var w=c.width;
var h=c.height;
ctx.lineWidth=2;
for(r=1;r<=6;r++)
{
ctx.beginPath();//起始路径
ctx.fillStyle="rgba(0,50,200,"+r/9+")";//返回填充的颜色
ctx.arc(w/2,h/2,160-r*15,0,2*Math.PI,true);//创建弧或曲线
ctx.fill();//填充颜色
}
}
画圆比较简单,稍微改动一下小细节就能做出好看的效果!