html5中扇形的绘制

扇形的绘制

代码如下：

<title>用户canvas画布绘制扇形和弧线</title>
</head>
<body><canvas id="mycans" style="border:9px solid yellow;"></canvas><script>// 抓取元素var mycans =document.querySelector('#mycans')console.log(mycans);// 设置画布的宽度和高度mycans.width =600;mycans.height =600;// 调用getContext(),返回给我们一个对象，这个对象里提供了若干个方法，供我们去绘制图形var ctx = mycans.getContext('2d');console.log(ctx);// 开始绘制路径  画画ctx.beginPath();//  准备要使用的颜色ctx.fillStyle ='pink';ctx.strokeStyle ='green';// 设置当前线条的宽度ctx,lineWidth =50;// 画画 ----逆时针绘制300度的扇形// 从圆心到弧线起点// 开始绘制路径ctx.moveTo(100,100);// 圆心的坐标(100,100)ctx.arc(100,100,100,0*Math.PI/180,60*Math.PI/180,true);// 再到终点，再闭合 （结束绘制路径）ctx.fill();ctx.stroke();ctx.closePath();// 画画 ---- 绘制120度弧线 （特别注意：你在绘制弧线的时候，不能使用closePath()去闭合路径！！）// 从弧形的起点 到 弧线的终点ctx.beginPath();ctx.moveTo(300,200);// 圆心的坐标(200,200)ctx.arc(200,200,100,0*Math.PI/180,120*Math.PI/180);ctx.stroke();// 画画 ----逆时针绘制60度的扇形// 从圆心到弧线起点// 开始绘制路径ctx.beginPath();ctx.moveTo(400,400);// 圆心的坐标(400,400)// ctx.arc(400,400,100,0*Math.PI/180,300*Math.PI/180,true);ctx.arc(400,400,100,0*Math.PI/180,60*Math.PI/180,false);// 再到终点，再闭合 （结束绘制路径）ctx.closePath();ctx.fill();ctx.stroke();</script>

html5中扇形的绘制相关推荐

用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸
怎么使用HTML5中的Canvas绘制笑脸发布时间:2021-02-26 09:33:14 来源:亿速云阅读:75 作者:清风这篇"怎么使用HTML5中的Canvas绘制笑脸" ...
php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下今天,你将学习一项称为Canvas(画布)的web技术,以及 ...
使用HTML5中的canvas绘制灰太狼图像
大家好,我是byoneself,本次将为大家分享一下使用HTML5中的canvas绘制一个灰太狼图像,希望对大家有所帮助. 下图是效果图: 以下就是实现的代码: <!DOCTYPE html&g ...
html 绘制矩形,HTML5中使用canvas绘制矩形
canvas是HTML5中新增的一个元素,使用Canvas可以绘制任何你喜欢的图形.先来认识什么是Canvas? 1.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布&qu ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
html5中圆形的绘制
圆形的绘制 context.arc(x,y,radius,startingAngle,endingAngle,anticlockwise); x,y:表示圆心坐标. radius:圆的半径. star ...
echart中拆线点的偏移_Qt中圆弧和扇形的绘制
在超声软件的开发中,超声成像模块需要绘制圆弧,例如绘制一个扇形的取样框,左右是一条直线,上下是一个圆弧,像这样. Qt中使用QPainter::drawArc绘制圆弧,使用QPainter::draw ...
html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆发布时间:2021-07-08 16:32:10 来源:亿速云阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
html5中用画布画小狗,HTML5中的Canvas（绘制）
Canvas中不仅可以画线(路径),还能画很多其他的图像,这一章就介绍Canvas的其他两种绘图API. 矩形我们在上一章只用线来画了一个矩形,其实可以一下子就画出来的,用下面函数: ctx.fil ...

html5中扇形的绘制

html5中扇形的绘制相关推荐

最新文章

热门文章