前端Canvas入门——怎么用Canvas画一些简单的图案

Canvas作为前端的画图工具，其实用途还是蛮广泛的，但是很多前端学习课程其实都很少涉及到这块内容。

于是乎，就写下这个了。

当然啦，目前还在学习摸索中。

一些实战代码，仅供参考：

    <canvasid="ctx"width="300px"height="300px"style="border: 1px solid;margin: 100px 0 0 666px;"><!-- border不起效果，不能直接使用border，而是用style去写，个人不建议使用这个border。默认宽高是300*150px--></canvas><script>// 通过id去获取canvas，这里不需要#const myCtx = document.getElementById('ctx')// 通过getContext()方法创建2d平面const ctx = myCtx.getContext("2d")// --------------------------------------------// 要求：画一个矩形// ctx.rect(100, 100, 100, 100)// 前面两个是起始的坐标位置，后面两个是宽高// 改变笔头// ctx.strokeStyle = "red"// 设置画笔的像素值// ctx.lineWidth = 3// 使用stroke()是画出形状，不会填充// ctx.stroke()// 使用fill是填充的意思// ctx.fill()// --------------------------------------------// 使用简单方法画矩形// 改变笔头// ctx.strokeStyle = "red"// 使用strokeRect()画出// ctx.strokeRect(125, 125, 50, 50)// 使用fillStyle，改变画笔颜色// ctx.fillStyle = "red"// 使用fillRect()填充// ctx.fillRect(100, 100, 100, 100)// 使用clearRect()清空// ctx.clearRect(125, 125, 50, 50)// -------------------------------------// 画一个三角形// 移动笔尖// ctx.moveTo(30, 40)// 先画出一条横线// ctx.lineTo(270, 40)// 再画出一条竖线// ctx.lineTo(270, 260)// 回到起点，闭合整个曲线// ctx.closePath()// -------------------------------------// 画一个圆形// 最后结束角不能是0，圆形必须是2*Math.PI// 还有个参数的——关于画的方向的，但是默认是顺时针，这里使用默认效果。// 从X轴开始出发，X轴算是0°// ctx.arc(150, 150, 50, 0, 2 * Math.PI)// 改变颜色// ctx.strokeStyle = "blue"// 完成绘图// ctx.stroke()// 改变填充颜色// ctx.fillStyle = "red"// 完成绘图// ctx.fill()// -------------------------------------// 画一个椭圆 - 不闭合的ctx.arc(150, 150, 88, 0, 1.8*Math.PI)// 改变画笔颜色// ctx.strokeStyle = "orange"// 完成绘图// ctx.stroke()// 改变填充颜色// ctx.fillStyle = "green"// 完成绘图 - 有bug - 并不是椭圆，而是被切了一小块的圆// ctx.fill()// 完善 - 闭合图案// 笔尖回到圆点// ctx.lineTo(150, 150)// 两段闭合// ctx.closePath()// 填充// ctx.fill()// -----------------------------------// 画一个圆ctx.arc(150, 150, 100, 0, 1.6 * Math.PI)// 要求：渐变色的椭圆形// 设置线性渐变色// const gradient = ctx.createLinearGradient(200, 200, 50, 50)// 设置放射状渐变色 - 在起始和结尾坐标处添加了半径const gradient = ctx.createRadialGradient(180, 180, 100, 75, 75, 100)// 添加颜色 - 注意前面的数字和后面的颜色gradient.addColorStop(0, "black")gradient.addColorStop("0.5", "#999")gradient.addColorStop("0.8", "red")gradient.addColorStop(1, "blue")// 直接填充ctx.fillStyle = gradient// 笔尖回到圆点ctx.lineTo(150, 150)// 两段闭合ctx.closePath()// 完成绘图ctx.fill()

注意最后一个椭圆的闭合的实现：

闭合前：