200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html5 canvas画布绘制矩形和圆形

html5 canvas画布绘制矩形和圆形

时间:2023-09-11 20:37:08

相关推荐

html5 canvas画布绘制矩形和圆形

html5为我们提供了非常有特色的标签,canvas标签为我们可以实现在网页中画画提供了便利,接下来我们列举他的常用操作。

新建一个html5的文档,建立一个canvas画布,设置长宽,这里需要特别注意,canvas标签可以在标签内设置width,height,也能通过css来设置,但是通过css来设置的标签,当绘制图形的时候会变形,所以我们建议直接在标签内设置。

canvas画布本身不能绘画,它必须通过javascript来实现它的绘画功能,getContext('2d'),是它里面的内部对象,它里面封装了绘画的方法,大家一看见2d是不是很兴奋,但是canvas很纯洁,并没有3d功能,我们建立好了模版,可以进行下一步了。

绘制一个矩形,填充颜色,这里面有两个知识点,fillStyle fillRect(0,0,100,100),fillRect有四个参数,前两个代表,x,y,表示位置,后两个代表长宽。蓝色方框就是我们的显示效果

绘制一个圆型,beginPath ();表示路径开始,arc(0,0,50,0,Math.PI*2,true);参数解释前两个代表xy,第三个代表半径,第四个代表结束角度,第五个代表圆周率,第五个代表顺逆,

我们再做一个复杂的图形,做一个笑脸

我们已经学习canvas基本的操作了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。