使用canvas繪制簡單圖形（下）
绘制圆形
绘制圆形仍然采用绘制路径并填充颜色的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border:1px solid;}
</style>
</head>
<body>
<canvas id="myCanvas" width="200px" height="200px">
浏览器不支持canvas元素时显示该文本内容
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
//fillStyle属性用于指定绘制图形的填充颜色
context.fillStyle="#ff00ff";
//beginPath()方法用于开始绘制路径
context.beginPath();
//arc()方法参数：arc(x,y,radius,startAngle,endAngle,counterclockwise)
//参数x，y为起点位置，radius为圆形的半径，startAngle为开始角度，endAngle为结束角度
//counterclockwise（可选）（逆时针的）这个参数传布尔值，flase表示顺时针，true表示逆时针
context.arc(100,100,50,0,2*Math.PI,false);
//closePath()方法用于将图形闭合起来
context.closePath();
//fill()方法将图形填充
context.fill();
</script>
</body>
</html>arc()方法原意是为了绘制弧线，所以为了更加了解arc()方法，请看下面例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border:1px solid;}
</style>
</head>
<body>
<!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
<canvas id="myCanvas" width="200px" height="200px">
浏览器不支持canvas元素时显示该文本内容
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
for(var i=0;i<15;i++){
//fillStyle属性用于指定绘制图形的填充颜色
context.strokeStyle="#ff00ff";
//beginPath()方法用于开始绘制路径
context.beginPath();
//arc()方法参数：arc(x,y,startAngle,endAngle,counterclockwise)
//counterclockwise（可选）（逆时针的）这个参数传布尔值，flase表示顺时针，true表示逆时针
context.arc(0,200,i*10,0,1.5*Math.PI,true);
//fill()方法将图形填充
context.stroke();
}
</script>
</body>
</html>你会发现在上面例子中并没有使用closePath()方法，如果使用这个方法，会使路径闭合，具体看下面例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border:1px solid;}
</style>
</head>
<body>
<!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
<canvas id="myCanvas" width="200px" height="200px">
浏览器不支持canvas元素时显示该文本内容
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
for(var i=0;i<15;i++){
//fillStyle属性用于指定绘制图形的填充颜色
context.strokeStyle="#ff00ff";
//beginPath()方法用于开始绘制路径
context.beginPath();
//arc()方法参数：arc(x,y,startAngle,endAngle,counterclockwise)
//counterclockwise（可选）（逆时针的）这个参数传布尔值，flase表示顺时针，true表示逆时针
context.arc(0,200,i*10,0,1.5*Math.PI,true);
//closePath()方法用于将图形闭合起来
context.closePath();
//fill()方法将图形填充
context.stroke();
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border:1px solid;}
</style>
</head>
<body>
<!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
<canvas id="myCanvas" width="200px" height="200px">
浏览器不支持canvas元素时显示该文本内容
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="blue";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.fill();
</script>
</body>
</html>当然也可以绘制空心三角形，需使用stroke()方法，看下面例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border:1px solid;}
</style>
</head>
<body>
<!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
<canvas id="myCanvas" width="200px" height="200px">
浏览器不支持canvas元素时显示该文本内容
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.strokeStyle="blue";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.closePath();
context.stroke();
</script>
</body>
</html>點(diǎn)擊查看更多內(nèi)容
2人點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦