canvas 绘制圆形

2018-10-22 00:13| 作者: admin| 查看: 1296| 评论: 0|来自: 蚂蚁部落

本文介绍一下利用canvas绘制圆形图案,越是规则的图案越容易绘制。

canvas内置了arc方法实现此功能,的确非常轻松。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas{
  background-color: #ccc;
}  
</style>  
<script>
window.onload=function(){
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");
  ctx.arc(100, 100, 40, 0, 2 * Math.PI);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/22/001400thggnnsfho8ewgfg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码绘制了一个比较原生态的原型,没有填充,描边也是默认的。

arc方法参数简介如下:

(1).第一个参数规定圆心x轴坐标。

(2).第二个参数规定圆心y轴坐标。

(3).第三个参数规定圆的半径尺寸,单位是像素。

(4).第四个参数规定圆绘制的起始角度。

(5).第五个参数规定圆绘制的结束角度。

(6).第六个参数规定逆时针绘制还是顺时针绘制。

具体用法可以参阅canvas arc()一章节。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas{
  background-color: #ccc;
}  
</style>  
<script>
window.onload=function(){
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");
  ctx.arc(100, 100, 40, 0, 2 * Math.PI);
  ctx.lineWidth=5;
  ctx.fillStyle = "blue";
  ctx.strokeStyle = "red";
  ctx.stroke();
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/22/001437fhw3wzl0glkcg4kl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码会绘制的圆形进行描边和填充操作。


鲜花

握手

雷人

路过

鸡蛋
返回顶部