html5中圆形的绘制

圆形的绘制

context.arc(x,y,radius,startingAngle,endingAngle,anticlockwise);
x，y:表示圆心坐标。
radius：圆的半径。
startingAngle：绘制圆弧的起始位置（弧度制，比如0，0.5*Math.PI.....）。
endingAngle:绘制圆弧的终止位置。绘制圆的方法
<canvas id="mycans" style="border:8px solid pink;"></canvas><script>//  抓取元素var mycans = document.querySelector('#mycans')console.log(mycans);// 设置画布的宽度和高度mycans.width =800;mycans.height =800;// 调用getContext(),返回给我们一个对象，这个对象里提供了若干个方法，供我们去绘制图形var ctx =mycans.getContext('2d')console.log (ctx);// 开始绘制路径  画画ctx.beginPath();//  准备要使用的颜色ctx.fillStyle ='yellow';ctx.strokeStyle ='orange';ctx.lineWidth =35;// 画画---圆//  context.arc(x,y,radius,startingAngle,endingAngle,anticlockwise);// x，y:表示圆心坐标。radius：圆的半径 startingAngle：绘制圆弧的起始位置（弧度制，比如0，0.5*Math.PI.....）ctx.arc(400,400,200,0,2*Math.PI,true);// 填充ctx.fill();// 填充边框ctx.stroke();// 结束绘制路径ctx.closePath();</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中扇形的绘制
扇形的绘制代码如下: <title>用户canvas画布绘制扇形和弧线</title> </head> <body><canvas id=&qu ...
HTML5中绘制图形
介绍HTML5中的一个新增元素--canvas元素以及伴随这个元素而来的一套编程接口--canvas API. 使用canvas API可以在页面上绘制出任何你想要的.非常漂亮的图形与图像,创造出更加 ...
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中圆形的绘制相关推荐

最新文章

热门文章