结构图
下面了解一下画球的案例:
标签 | <canvas></canvas> | 需要画球的画布标签 |
开启画布 | ctx.beginPath() | 开启画布 |
画圆球的属性 | ctx.arc(x,y,r,startAngle,endAngle,counterclockwise) | x,y是圆心的坐标、r是圆圈的半径, startAngle是角度的开启点, counterclockwise是角度的结束点 |
画布的填充颜色 | ctx.fillstyle = 'red' | red表示红色 |
填充结束 | ctx.fill(); |
如果不写fill() 属性的话填充颜色无效 |
着色 | ctx.stroke(); | 如果不写着色不会显示小球 |
关闭画布 | ctx.closePath | 画球的画布的关闭画布的属 |
下面开始写代码啦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画圆</title>
<style>
canvas{
border: 2px solid #aaaaaa;
display: block;
}
</style>
</head>
<body>
<canvas id="con" width="500" height="500"></canvas>
<script>
<!--获取画布-->
let canvas = document.getElementById('con');
let ctx = canvas.getContext('2d')
// 画圆
/**
*arc(x,y,radius,startAngle,endAngle,counterclockwise)
* x,y是圆心的坐标
* radius是圆圈的描边
* startAngle是角度的衡量
* counterclockwise 是圆圈的方向逆时针(true) 顺时针(false)
*/
ctx.arc(250,250,200,0,Math.PI*2,false)
//填充颜色
ctx.fillStyle = 'yellow'
ctx.fill();
//描边大小
ctx.lineWidth = 10;
//描边颜色
ctx.strokeStyle = 'red'
// 如果没有着色也没看的见
ctx.stroke()
// 关闭路径
ctx.closePath()
</script>
</body>
</html>
我们的本次画小球的案例到此结束! 谢谢给位的支持!