聊聊有趣的HTML5 Canvas！

Canvas 是 HTML5 提供的一个用于展示绘图效果的标签. Canvas 原意为画布, 在 HTML 页面中用于展示绘图效果. 最早 Canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现。

canvas 的使用领域

• 游戏
• 大数据可视化数据
• banner 广告
• 多媒体
• 模拟仿真
• 远程操作
• 图形编辑
  

判断浏览器是否支持 canvas 标签

1. var canvas = document.getElementById('canvas')
   
2. if (canvas.getContext) {
   
3.   console.log('你的浏览器支持Canvas!')
   
4. } else {
   
5.   console.log('你的浏览器不支持Canvas!')
   
6. }

复制代码

canvas 的基本用法

1、使用 canvas 标签, 即可在页面中开辟一格区域，可以设置其宽高，宽高为 300 和 150

1. <canvas></canvas>

复制代码

2、获取 dom 元素 canvas

canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api。

1. var cas = document.querySelector('canvas')

复制代码

3、通过 cas 获取上下文对象(画布对象!)

1. var ctx = cas.getContext('2d')

复制代码

4、通过 ctx 开始画画（设置起点 设置终点 连线-描边 ）

1. ctx.moveTo(10, 10)
   
2. ctx.lineTo(100, 100)
   
3. ctx.stroke()

复制代码

绘制线条

• 设置开始位置: context.moveTo( x, y )
• 设置终点位置: context.lineTo( x, y )
• 描边绘制: context.stroke()
• 填充绘制: context.fill()
• 闭合路径: context.closePath()
  

canvas 还可以设置线条的相关属性，如下：

• CanvasRenderingContext2D.lineWidth 设置线宽.
• CanvasRenderingContext2D.strokeStyle 设置线条颜色.
• CanvasRenderingContext2D.lineCap 设置线末端类型，'butt'( 默认 ), 'round', 'square'.
• CanvasRenderingContext2D.lineJoin 设置相交线的拐点， 'miter'(默认)，'round', 'bevel',
• CanvasRenderingContext2D.getLineDash() 获得线段样式数组.
• CanvasRenderingContext2D.setLineDash() 设置线段样式.
• CanvasRenderingContext2D.lineDashOffset 绘制线段偏移量.
  

封装一个画矩形的方法

1. function myRect(ctxTmp, x, y, w, h) {
   
2.   ctxTmp.moveTo(x, y)
   
3.   ctxTmp.lineTo(x + w, y)
   
4.   ctxTmp.lineTo(x + w, y + h)
   
5.   ctxTmp.lineTo(x, y + h)
   
6.   ctxTmp.lineTo(x, y)
   
7.   ctxTmp.stroke()
   
8. }
   
9. 
   
10. var cas = document.querySelector('canvas')
    
11. var ctx = cas.getContext('2d')
    
12. myRect(ctx, 50, 50, 200, 200)

复制代码

绘制矩形

• fillRect( x , y , width , height) 填充以(x,y)为起点宽高分别为 width、height 的矩形 默认为黑色
• stokeRect( x , y , width , height) 绘制一个空心以(x,y)为起点宽高分别为 width、height 的矩形
• clearRect( x, y , width , height ) 清除以(x,y)为起点宽高分别为 width、height 的矩形 为透明
  

绘制圆弧

绘制圆弧的方法有

• CanvasRenderingContext2D.arc()
• CanvasRenderingContext2D.arcTo()
  

6 个参数: x，y(圆心的坐标)，半径，起始的弧度(不是角度 deg)，结束的弧度，(bool 设置方向 ! )

1. var cas = document.querySelector('canvas')
   
2. var ctx = cas.getContext('2d')
   
3. 
   
4. ctx.arc(100, 100, 100, 0, degToArc(360))
   
5. ctx.stroke()
   
6. 
   
7. // 角度转弧度
   
8. function degToArc(num) {
   
9.   return (Math.PI / 180) * num
   
10. }

复制代码

绘制扇形

1. var cas = document.querySelector('canvas')var ctx = cas.getContext('2d')
   
2. 
   
3. ctx.arc(300, 300, 200, degToArc(125), degToArc(300))// 自动连回原点ctx.closePath()
   
4. ctx.stroke()function degToArc(num) {  return (Math.PI / 180) * num
   
5. }

复制代码

制作画笔

• 声明一个变量作为标识
• 鼠标按下的时候，记录起点位置
• 鼠标移动的时候，开始描绘并连线
• 鼠标抬起的时候，关闭开关
  

1. var cas = document.querySelector('canvas')
   
2. var ctx = cas.getContext('2d')
   
3. 
   
4. var isDraw = false
   
5. // 鼠标按下事件
   
6. cas.addEventListener('mousedown', function () {
   
7.   isDraw = true
   
8.   ctx.beginPath()
   
9. })
   
10. 
    
11. // 鼠标移动事件
    
12. cas.addEventListener('mousemove', function (e) {
    
13.   if (!isDraw) {
    
14.     // 没有按下
    
15.     return
    
16.   }
    
17.   // 获取相对于容器内的坐标
    
18.   var x = e.offsetX
    
19.   var y = e.offsetY
    
20.   ctx.lineTo(x, y)
    
21.   ctx.stroke()
    
22. })
    
23. 
    
24. cas.addEventListener('mouseup', function () {
    
25.   // 关闭开关了!
    
26.   isDraw = false
    
27. })

复制代码

手动涂擦

原理和画布相似，只不过用的是clearRect()方法。

1. var cas = document.querySelector('canvas')
   
2. var ctx = cas.getContext('2d')
   
3. 
   
4. ctx.fillRect(0, 0, 600, 600)
   
5. 
   
6. // 开关
   
7. var isClear = false
   
8. 
   
9. cas.addEventListener('mousedown', function () {
   
10.   isClear = true
    
11. })
    
12. 
    
13. cas.addEventListener('mousemove', function (e) {
    
14.   if (!isClear) {
    
15.     return
    
16.   }
    
17.   var x = e.offsetX
    
18.   var y = e.offsetY
    
19.   var w = 20
    
20.   var h = 20
    
21.   ctx.clearRect(x, y, w, h)
    
22. })
    
23. 
    
24. cas.addEventListener('mouseup', function () {
    
25.   isClear = false
    
26. })

复制代码

刮刮乐

• 首先需要设置奖品和画布，将画布置于图片上方盖住，
• 随机设置生成奖品。
• 当手触摸移动的时候，可以擦除部分画布，露出奖品区。
  

1. img {
   
2.   width: 600px;
   
3.   height: 600px;
   
4.   position: absolute;
   
5.   top: 10%;
   
6.   left: 30%;
   
7. }
   
8. 
   
9. canvas {
   
10.   width: 600px;
    
11.   height: 600px;
    
12.   position: absolute;
    
13.   top: 10%;
    
14.   left: 30%;
    
15.   border: 1px solid #000;
    
16. }

复制代码

js

1. var cas = document.querySelector('canvas')
   
2. var ctx = cas.getContext('2d')
   
3. var img = document.querySelector('img')
   
4. // 加一个遮罩层
   
5. ctx.fillStyle = '#ccc'
   
6. ctx.fillRect(0, 0, cas.width, cas.height)
   
7. setImgUrl()
   
8. // 开关
   
9. var isClear = false
   
10. cas.addEventListener('mousedown', function () {
    
11.   isClear = true
    
12. })
    
13. cas.addEventListener('mousemove', function (e) {
    
14.   if (!isClear) {
    
15.     return
    
16.   }
    
17.   var x = e.offsetX
    
18.   var y = e.offsetY
    
19.   ctx.clearRect(x, y, 30, 30)
    
20. })
    
21. cas.addEventListener('mouseup', function () {
    
22.   isClear = false
    
23. })
    
24. 
    
25. function setImgUrl() {
    
26.   var arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']
    
27.   // 0-3
    
28.   var random = Math.round(Math.random() * 3)
    
29.   img.src = arr[random]
    
30. }

复制代码