html5的画布canvas如何画出弧线和旋转的图形

本篇文章给大家分享的是有关html5的画布canvas如何画出弧线和旋转的图形，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

公司主营业务：成都网站建设、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出拉萨免费做网站回馈大家。

在做旋转操作之前一定要理解一句话：旋转的是画布的坐标系而不是图形本身，好了，理解了这一句话后，接下来的就很简单了。

代码如下:

<script language="javascript">
var cxt=document.getElementById('demo').getContext("2d");
cxt.beginPath();
cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,false);/*绘制一段半圆弧线，圆心坐标是100,100；开始弧度是0.75，结束弧度是1.75，最后一个参数False = 顺时针，true = 逆时针，当然，这个参数可选的*/
cxt.fillStyle="#F00";/*选择使用的颜色*/
cxt.fill();/*真正将图形画在画布上的一步，画第一个半圆*/
/*同理绘制第二个半圆*/
cxt.beginPath();
cxt.arc(170,100,50,Math.PI*1.25,Math.PI*0.25,false);
cxt.fillStyle="#F00";
cxt.fill();/*将绘制的图形画在画布上*/
cxt.beginPath();
/*将画布顺时针旋转45度，rotate函数的参数是弧度，所以要进行转换*/
cxt.rotate(45*Math.PI/180);
cxt.fillRect(141.1,-50,100,100);/*开始坐标为141.1，-50，宽和高都是100*/
cxt.fillStyle="#F00";
cxt.fill();
cxt.beginPath();
/*将画布旋转到正常的角度*/
cxt.rotate(-45*Math.PI/180);
cxt.font="60px 微软雅黑";
cxt.strokeStyle="#f00";
cxt.strokeText("我爱html5",0,300);/*两个参数，第一个是开始绘制文本的x轴坐标，第二个是开始绘制文本的Y坐标*/
cxt.stroke();
/*创建渐变*/
var grd=cxt.createLinearGradient(0,45,175,50);/*四个参数分别是渐变开始点x、y渐变结束点x、y*/
grd.addColorStop(0,"#FF0000");
grd.addColorStop(0.25,"#FFFF00");
grd.addColorStop(0.5,"#00FF00");
grd.addColorStop(0.75,"#00FFFF");
grd.addColorStop(1,"#FFFF00");
cxt.strokeStyle=grd;
cxt.strokeText("我爱canvas",0,400);/*两个参数，第一个是开始绘制文本的x轴坐标，第二个是开始绘制文本的Y坐标*/
cxt.stroke();
</script>

以上就是html5的画布canvas如何画出弧线和旋转的图形，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

当前标题：html5的画布canvas如何画出弧线和旋转的图形
文章分享：https://www.cdcxhl.com/article18/gdhpdp.html

成都网站建设公司_创新互联，为您提供网站制作、虚拟主机、标签优化、网站建设、面包屑导航、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联