如何使用HTML5绘制一个圆形

在HTML5中 , 本家儿要经由过程canvas元素和JS连系来绘制圆形 , 下面介绍绘制的

方式/
1【如何使用HTML5绘制一个圆形】新建一个html页面 , 文件名为test.html , 用于绘制圆形 。


如何使用HTML5绘制一个圆形

文章插图

2经由过程HTML5中的canvas元素建立一张宽200px , 高200px的画布 , 用于绘制圆形 。


如何使用HTML5绘制一个圆形

文章插图

3为了便利查看 , 给canvas画布一个边框 , 而且给canvas一个id(这个很主要 , 用于后面利用js绘制圆形) 。


如何使用HTML5绘制一个圆形

文章插图

4运行以上代码 , 在浏览器可以看到已当作功绘制一张画布 。


如何使用HTML5绘制一个圆形

文章插图

5利用JS获得画布对象 , 本家儿要用于操作画布 , 在画布上实现圆形的绘制 。


如何使用HTML5绘制一个圆形

文章插图

6经由过程JS中的getContext方式 , 设置绘制图片的情况 , 传入一个参数2d , 暗示绘制2d图案 。

如何使用HTML5绘制一个圆形

文章插图

7对绘制的情况进行界说 , fillStyle界说圆的颜色 , arc界说圆的大小和坐标 , fill用于利用界说的参数填充圆形 。

如何使用HTML5绘制一个圆形

文章插图

8运行以上代码 , 在浏览器可以看到已当作功绘制一个圆形 。

如何使用HTML5绘制一个圆形

文章插图


以上内容就是如何使用HTML5绘制一个圆形的内容啦 , 希望对你有所帮助哦!

    推荐阅读