canvas

学习 https://juejin.im/post/5986d6e1f265da3e241e8cdb#heading-18 所得

Canvas基本学习

什么是Canvas

canvas是HTML5新定义的标签，通过使用脚本来绘制图形。标签只是图形容器，相当于一个画布,canvas本身没有绘图能力。

默认情况下，canvas没有边框和内容。默认为300*150的画布。可以通过修改width和height来改变canvas画布的大小

<canvas id="canvas" width="1000px" height="1000px;"></canvas>

getContext()

context是一个封装了很多绘图功能的对象，我们在页面中创建了一个canvas标签之后，首先要使用getContext()获取canvas的上下文环境。

getContext(“2d”) 对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas绘制图形

content.fill()

content.fill()填充当前的图形，默认为黑色。在填充前先使用fillStyle设置填充的颜色h或者渐变。并且如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径（正如 closePath() 一样），然后填充该路径。

content.stroke()

troke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。在进行图形绘制前，要设置好绘图的样式

fillStyle() //填充的样式
strokeStyle() //边框的样式
context.fillWidth() //图形边框宽度

绘制矩形

// html
<canvas id="canvas"></canvas>

//javascript
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.fillRect(0, 0, 100, 100)
context.strokeRect(100, 0, 100, 100)

在没有设置颜色的情况下， 默认是黑色的

通过以下方法修改颜色

context.fillStyle = "pink"
context.strokeStyle = "blue"
context.fillRect(0, 0, 100, 100)
context.strokeRect(100, 0, 100, 100)

清除矩形区域

clearRect(x, y, width, height)

• x,y 是坐标
• width, height是宽高

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.fillRect(0, 0, 100, 100)
context.strokeRect(120, 0, 100, 100)
context.fillStyle = "pink"
context.strokeStyle = "darkred"
context.fillRect(0, 120, 100, 100)
context.strokeRect(120, 120, 100, 100)
context.clearRect(50, 50, 120, 120)

实心圆

context.arc(x, y, radius, starAngle, endAngle, anticlockwise)

• starAngle 开始角度
• endAngle 结束角度
• anticlockwise 是否逆时针, true为逆时针，false为顺时针

context.beginPath()
context.arc(300, 350, 100, 0, Math.PI * 2, true)
//不关闭路径，路径会一直保留下去
context.closePath()
context.fillStyle = "pink"
context.fill()

圆弧

不填充颜色，就是圆弧了~

由于使用了关闭路径，所以绘制完毕

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.beginPath()
context.arc(300, 350, 100, 0, Math.PI, true)
context.closePath()
context.strokeStyle = "pink"
context.stroke()

如果没有关闭路径,则不会停止

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.beginPath()
context.arc(300, 350, 100, 0, Math.PI, true)

context.strokeStyle = "pink"
context.stroke()

• 系统默认在绘制第一个路径的开始点为beginPath
• 如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
• 每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分

如果第一个圆弧没有closePath,第二个圆弧没有重新定义beginPath，会出现效果

绘制线段

• moveTo(x,y) ： 把路径移动到画布中的指定点，不创建线段
• lineTo(x,y) ： 添加一个新点，然后在画布中创建从该点到最后指定点的线条

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.strokeStyle = "red"
context.moveTo(0, 0)
context.lineTo(100, 100)
context.stroke()

如果没有moveTo，那么第一次lineTo的效果和moveTo一样

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.strokeStyle = "red"
context.lineTo(100, 0)
context.lineTo(100, 100)
context.stroke()

如果每次lineTo后面没有moveTo,那么下次lineTo的开始点为前一次lineTo的结束点

线性渐变

var lg = context.createLinearGradient(xStart, yStart, xEnd, yEnd)
lg.addColorStop(offset, color)

• xstart:渐变开始点x坐标
• ystart:渐变开始点y坐标
• xEnd:渐变结束点x坐标
• yEnd:渐变结束点y坐标
• offset:设定的颜色离渐变结束点的偏移量(0~1)
• color:绘制时要使用的颜色

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
var g1 = context.createLinearGradient(0, 0, 0,300)
g1.addColorStop(0, '#E55D87')
g1.addColorStop(1,'#5FC3F4')
context.fillStyle = g1
context.fillRect(0, 0, 400, 300)

**插曲 **

也可以使用background: linear-gradient来实现渐变~

background: linear-gradient(#E55D87 20%, #5FC3F4 80% )

径向渐变

var rg = context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

rg.addColorStop(offset, color)

• xStart：发散开始圆心x坐标

• yStart：发散开始圆心y坐标

• radiusStart：发散开始圆的半径

• xEnd：发散结束圆心的x坐标

• yEnd：发散结束圆心的y坐标

• radiusEnd：发散结束圆的半径

• offset：设定的颜色离渐变结束点的偏移量(0~1)

• color：绘制时要使用的颜色

  例如一个同心圆径向渐变

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 200)
g1.addColorStop(0.1, '#F09819')
g1.addColorStop(1, '#EDDE5D')
context.fillStyle = g1
context.beginPath()
context.arc(200, 150, 100, 0, Math.PI * 2, true)
context.closePath()
context.fill()

图形变形

缩放

scale(x, y)

旋转

rotate(angle)

平移

translate(x, y)

阴影

shadowOffsetX 设置或返回阴影距形状的水平距离 (默认值为0)

shadowOffsetY 设置或返回阴影距形状的垂直距离 (默认值为0)

shadowColor 设置或返回用于阴影的颜色

shadowBlur 设置或返回用于阴影的模糊级别 (值越大越模糊)

例子 绘制一个10半径的小球，其阴影也为白色！ 如下图所示，有一种发光的感觉 很好看

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.fillStyle = 'white'
context.beginPath()
context.arc(100, 100, 10, 0, Math.PI * 2)
context.shadowColor = 'white'
context.shadowBlur = 10
context.fill()
context.closePath()

绘制文字

fillText(text, x, y) 绘制实心文字

strokeText() 绘制文字描边 (空心)

textAlign 设置或返回文本内容的当前对齐方式

textBaseline 设置或返回在绘制文本时使用的当前文本基线

font: 设置或返回文本内容的当前字体属性

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.font = "40px Arial"
context.fillText("LilyChenlin", 200, 200)
context.strokeText("LilyChenlin", 200, 300)