目录
canvas简介
画爱心
效果
画笑脸
效果
结语
canvas简介
canvas是HTML5中推出的新功能,可以在页面上生成一个画布,使用js可以在画布上绘制一些图形。
画爱心
画爱心我们需要用到bezierCurveTo方法,可以绘制一个三次贝塞尔曲线,让我们绘制想要的曲线,下面我们看代码
<!DOCTYPE html>
效果
bezierCurveTo方法参数分别是第一个控制杆的x轴,第一个控制杆的y轴,第二个控制杆的x轴,第二个控制杆的y轴,结束位置的x轴,结束位置的y轴。
画笑脸
画笑脸我们需要用到arc方法,此方法可以绘制出一个圆弧。下面我们看代码
<!DOCTYPE html>
arc的参数分别是x轴的位置,y轴的位置,大小,圆弧开始角度,圆弧结束角度,反转绘制。
Math.PI是派,乘以2就相当于360度。
效果
结语
canvas可以使我们在页面绘制许多不一样的图形,上面我只举了两个非常简单的例子。