canvas简介

canvas是HTML5中推出的新功能，可以在页面上生成一个画布，使用js可以在画布上绘制一些图形。

画爱心

画爱心我们需要用到bezierCurveTo方法，可以绘制一个三次贝塞尔曲线，让我们绘制想要的曲线，下面我们看代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><canvas id="canvas" width="500" height="500"></canvas></body><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')// 画爱心ctx.beginPath()ctx.moveTo(250, 250)// 右边ctx.bezierCurveTo(300, 150, 450, 250, 250, 450)ctx.moveTo(250, 450)// 左边ctx.bezierCurveTo(50, 250, 200, 150, 250, 250)ctx.stroke()</script>
</html>

效果

bezierCurveTo方法参数分别是第一个控制杆的x轴，第一个控制杆的y轴，第二个控制杆的x轴，第二个控制杆的y轴，结束位置的x轴，结束位置的y轴。

画笑脸

画笑脸我们需要用到arc方法，此方法可以绘制出一个圆弧。下面我们看代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><canvas id="canvas" width="500" height="500"></canvas></body><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()// 画圆ctx.arc(70, 70, 50, Math.PI * 2, 0)ctx.moveTo(105, 70)// 画嘴巴ctx.arc(70, 70, 35, 0, Math.PI)ctx.moveTo(105, 50)// 画右边眼睛ctx.arc(95, 50, 10, 0, Math.PI, true)ctx.moveTo(55, 50)// 画左边眼睛ctx.arc(45, 50, 10, 0, Math.PI, true)ctx.stroke()ctx.closePath()</script>
</html>

arc的参数分别是x轴的位置，y轴的位置，大小，圆弧开始角度，圆弧结束角度，反转绘制。

Math.PI是派，乘以2就相当于360度。

效果

结语

canvas可以使我们在页面绘制许多不一样的图形，上面我只举了两个非常简单的例子。

前端H5使用canvas画爱心以及笑脸相关推荐

新H5中用canvas画一个数字钟表
此文章是参考以往大牛代码,在大牛代码基础上加以更改而成. 本人暂时还是一名技术菜鸟,刚刚踏上web前端这条路才五个月,希望大牛们多多提携... 效果图如下: 话不多说,上代码: <body st ...
javascript中canvas画爱心
1.效果如下画单个爱心的效果如下: 2.HTML,CSS代码 <!DOCTYPE html> <html> <head><meta charset=&quo ...
H5组件Canvas画电子印章
效果图代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
利用H5的canvas画一个时钟
学习了一周的canvas了,看了一些资料和视频,跟着视频也画了一些统计图和圆,矩形,线之类的,跟着视频也做了一个钟表,话不多说,直接上代码 canvas上套一个div盒子,作为钟表的背景 <di ...
如何用h5标签canvas画柱状图【立体】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
你还在用canvas画爱心吗？看我让你的名字在星空绽放
通过canvas画出爱心图案，表达你的爱意！
通过canvas画出爱心图案,浏览器可以使用以下js代码,新建对象时,会自动呈现动画效果,代码文末可下载. 点击免费下载源码 let HeartCanvas = new HeartCanvas() / ...
H5 canvas 画圆画圆角
canvas是H5的一大重点我们来学一下如何用canvas画圆画圆 arc(x,y,r,起始弧度,结束弧度,顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径弧度单位用Math.PI 顺逆时针 ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...

前端H5使用canvas画爱心以及笑脸

canvas简介

画爱心

效果

画笑脸

效果

结语

前端H5使用canvas画爱心以及笑脸相关推荐

最新文章

热门文章