html5画布教程画多个圆为什么会连在一起

来源：蜘蛛抓取(WebSpider) 时间：2016-12-08 16:35 标签： html5画布教程
HTML5:canvas画布上画连续曲线_H5之家 - 中国HTML5教程资源分享第一站
canvas教程
HTML5:canvas画布上画连续曲线
作者：H5之家
Step Day | 每天进步一小步，人生进步一大步。HTML5:canvas画布上画连续曲线-技术讲座
首先页面设置一个canvas的画布标签，代码形如：
&!DOCTYPE HTML&
&title&Canvas画布画连续曲线
&canvas&您的浏览器不支持 HTML5 canvas 标签。&/canvas&
其次，通过JS去控制这个画布myCanvas：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(188, 150);
ctx.quadraticCurveTo(288, 0, 388, 150);
ctx.lineWidth = 1; //曲线宽度
// 设置曲线颜色
ctx.strokeStyle = 'green';
ctx.stroke();
//继续画曲线
ctx.beginPath();
ctx.moveTo(388,150);
ctx.quadraticCurveTo(480,0,588,150);
ctx.lineWidth = 1;
ctx.strokeStyle = "orange";
ctx.stroke();
代码解释：
1、通过getContext("2d")声明将会在此画布上进行二维作画；
2、beginPath():开始绘制路径，或者重置绘制路径，如果重新开启一条路径，重新开始的意思。
3、moveTo(x,y):表示将画笔移动至画布的x,y这个坐标点，画布的X和y轴朝向是这样子的
4、quadraticCurveTo(cx,cy,x2,y2)：方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点，cx,cy就是控制点 用来控制曲线弯曲的程度，（x2,y2)表示线条的终点坐标。
5、lineWidth：可设置线条粗细，单位为px。
6、strokeStyle：可设置线条的颜色；
7、stroke（）：执行绘制任务。
HTML5，Canvas，画布，quadraticCurveTo，曲线，控制点，moveTo，strokeStyle，stroke
&可以扫描本站该帖子的QR二维码进行访问&&
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
关注微信公众号，了解最新精彩内容html5 canvas 画布画圆 - 烈火如歌007 - 推酷
html5 canvas 画布画圆 - 烈火如歌007
什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 &canvas& 标签。
ps:Internet Explorer 8 以及更早的版本不支持 &canvas& 标签。
在canvas中，画布的 X 和 Y 坐标用于在画布上对绘画进行定位，画布的左上角为坐标原点（0,0）。
在canvas中的坐标如下：
在Canvas中用来绘制圆形的javascript api函数为arc(x,y,radius,startAngle,endAngle,antiClockwise(Boolean));
x，y是圆心的坐标，
radius是圆的半径，
startAngle 圆的起始角度，
endAngle圆的结束角度，
antiClockwise 圆绘制的顺序,默认为顺时针，为true时是逆时针，这只是是内部绘制的顺序不一样而已,显示的效果是一样的.
如绘制一个完整的圆形时:canvas.arc(50,50,25,0,2*Math.PI);
我们可以根据某个值来动态绘制圆弧的长度,只要把圆的结束角度设置为动态的即可。如根据某个百分比数据来绘制一个统计某个数据的圆弧,假设是满意度为50%，那么圆的结束角度为0.5*2*Math.PI.这样既可画出一个半圆了。
&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&canvas绘制圆形&/title&
&style type=&text/css&&
*{margin:0; padding:0;}
#canvas-box{width:980 margin:50}
#percent{color:#C00;}
#canvas{border:1px solid #900; margin:0 auto 0}
&div id='canvas-box'&
&p&&/p&&b id=&percent&&50&/b&%&/p&
&canvas id=&canvas& width=&400& height=&400& &&/canvas&
&script type=&text/javascript&&
var p=document.getElementById('percent').innerHTML;
var canvas=document.getElementById('canvas').getContext('2d');
canvas.beginPath();
canvas.arc(200,200,100,0,2*Math.PI);
canvas.strokeStyle='#f00';
canvas.lineWidth=2;
canvas.stroke();
canvas.closePath();
canvas.beginPath();
canvas.arc(50,50,50,0,p*2*Math.PI);
canvas.strokeStyle='#00f';
canvas.lineWidth=2;
canvas.stroke();
canvas.closePath();
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致

我要回帖

更多关于 html5画布教程 的文章

 

随机推荐