canvas之三：绘制弧和圆

在画完直线和三角形之后，接下来我们要画一段弧和一个圆，先看下效果图：

源代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.arc(300,300,200,0,1.5*Math.PI,false);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();

context.beginPath();
context.arc(750,300,200,0,2*Math.PI,false);
context.stroke();
}
</script>
</body>
</html>

代码详解：

0.为了时js代码更加精简，我们可以把设置画布大小通过canvas标签的属性width和weight来设置

1.context.arc(300,300,200,0,1.5*Math.PI,false)这段代码表示画一段弧，圆心为(300,300),半径为200，弧度从0到1.5PI，false表示顺时针画弧(true为逆时针)

2.context.beginPath()这行代码表示再画完一个图形后在另一个地方重新开始画另一个图形，若不进行该操作，则表示前后画的两个图形是不间断的，具体效果如下图所示：

canvas之三：绘制弧和圆相关推荐

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
Android利用canvas画各种图形(点、直线、弧、圆、扁圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
带着canvas去流浪系列之三绘制饼图
一. 任务说明使用原生canvasAPI绘制饼图(南丁格尔玫瑰). 二. 重点提示南丁格尔玫瑰图的画法有很多种,Echarts中提供的以半径或面积两种不同模式,本文中以面积比例画法为例,绘制算法如 ...
自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^
对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...
学习Canvas基础-绘制弧线和曲线
绘制曲线和弧线的方法 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) 用于绘制圆或部分圆. 参数: x-圆弧中心(圆心)的 x 轴 ...
软件项目技术点(7)——在canvas上绘制自定义图形
AxeSlide软件项目梳理 canvas绘图系列知识点整理图形种类目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比 ...
arcgis飞行轨迹动画_高德地图，百度地图，arcgis地图利用canvas动画绘制圆形扩散、运动轨迹等动态效果...
本文转发自热爱前端知识的博客原博客地址介绍在ECharts中看到过这种圆形扩散效果,类似css3,刚好项目中想把它用上,but我又不想引入整个echart.js文件,更重要的是想弄明白它的原 ...
Canvas设置样式无效导致圆变成椭圆的问题研究剖析
Canvas设置样式无效导致圆变成椭圆的问题研究剖析,如下面代码段. <!DOCTYPE html> <html lang="en"> <head&g ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...

canvas之三：绘制弧和圆

canvas之三：绘制弧和圆相关推荐

最新文章

热门文章