html5的画布canvas——画出弧线、转动的图型案例编

日期:2021-02-25 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

在做转动实际操作以前1定要了解1句话:转动的是画布的座标系而并不是图型自身,好了,了解了这1句话后,接下来的就很简易了。
最先了解1下画圆的座标:
 

拷贝编码
编码以下:

<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);/*绘图1段半圆弧线,圆心座标是100,100;刚开始弧度是0.75,完毕弧度是1.75,最终1个主要参数False = 顺时针,true = 逆时针,自然,这个主要参数可选的*/
cxt.fillStyle="#F00";/*挑选应用的色调*/
cxt.fill();/*真实将图型画在画布上的1步,画第1个半圆*/
/*同理绘图第2个半圆*/
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,⑸0,100,100);/*刚开始座标为141.1,⑸0,宽和高全是100*/
cxt.fillStyle="#F00";
cxt.fill();
cxt.beginPath();
/*将画布转动到一切正常的角度*/
cxt.rotate(⑷5*Math.PI/180);
cxt.font="60px 微软雅黑";
cxt.strokeStyle="#f00";
cxt.strokeText("我爱html5",0,300);/*两个主要参数,第1个是刚开始绘图文字的x轴座标,第2个是刚开始绘图文字的Y座标*/
cxt.stroke();
/*建立渐变色*/
var grd=cxt.createLinearGradient(0,45,175,50);/*4个主要参数各自是渐变色刚开始点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);/*两个主要参数,第1个是刚开始绘图文字的x轴座标,第2个是刚开始绘图文字的Y座标*/
cxt.stroke();
</script>

实际效果图: