HTML5 - Canvas - 《JavaScript 学习笔记》

[TOC]

canvas默认大小是300*150
canvas通过内联样式width和height设置宽高，不带单位
```
<canvas width="500" height="500"></canvas>
```

有画布就需要有画笔，画笔就需要用js引入

// 获取canvas的DOM对象
 const canvas = document.querySelector('canvas')

 // 从canvas中获取画笔ctx
 // console.log([canvas])
 const ctx = canvas.getContext('2d')

画笔操作

/*-- 
 ctx.moveTo() 将笔触移动到canvas上的某个点,以这个点作为一次操作的开始点
 ctx.lineTo() 将笔触画线到对应的点，前提是需要有moveTo()，以这个点作为中间点或重点
   如果没有moveTo 则把第一个lineTo作为开始点

 所有画线操作结束后，要调用ctx.stroke() 才可以显示，ctx.stroke()用来描边

 调用ctx.fill()可以填充对应区域,ctx.fill()用来填充

 如果想要修改线的颜色
 ctx.strokeStyle = "颜色"
 ctx.fillStyle = "颜色"

 如果在对应的代码，修改了两次颜色，则第二次生效。如何避免这个问题

 把一次画的操作放在
   ctx.beginPath()
   代码写在这里
   ctx.closePath()

 线宽
   ctx.lineWidth = 10

 线帽
   ctx.lineCap = "round"
*>

形状 ```javascript /*

              ctx.moveTo() 
       ctx.lineTo()
         用来画直线

/* ctx.rect(x, y, width, height) 可以画矩形，但是需要专门描边或者填充

  ctx.strokeRect(x, y, width, height) 直接画矩形 带描边
  ctx.fillRect(x, y, width, height) 直接画矩形 带填充
  ctx.clearRect(x, y, width, height) 清除掉canvas中某块矩形区域



*/

/* 如何画圆 ctx.arc(x, y, r, start, end, 是否逆时针)

    角度使用弧度
      PI 表示 180°
      2PI 表示 360°



*/


6. 如何实现动画
```html
<!-- 
    动画就是一张张图片快速切换，实现的动画

   -->

<canvas width="500" height="500"></canvas>
  <script>
    const canvas = document.querySelector('canvas')
    const ctx = canvas.getContext('2d')

    function random (x, y) {
      return Math.random() * (y - x) + x
    } 

    let x = 100
    let y = 200
    let speedX = 3
    let speedY = 4
    setInterval(() => {
      speedX = random(-5, 5)
      speedY = random(-5, 5)

      // console.log(canvas.width)
      ctx.beginPath()
      ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'

      ctx.fillRect(0, 0, canvas.width, canvas.height)
      // ctx.clearRect(0, 0, canvas.width, canvas.height)

      ctx.closePath()

      ctx.beginPath()
      ctx.fillStyle = 'black'

      ctx.arc(x, y, 20, 0, 2 * Math.PI)

      ctx.fill()

      ctx.closePath()

      if (x >= 480 || x <= 20) {
        speedX = -speedX
      } 



      if (y >= 480 || y <= 20) {
        speedY = -speedY
      }



      x += speedX
      y += speedY


    }, 1000 / 60)



  </script>

使用对象的方式定义圆 ```html
```
8. Canvas -文本

使用 canvas 绘制文本，重要的属性和方法如下：<br />font - 定义字体<br />fillText(_text,x,y_) - 在 canvas 上绘制实心的文本<br />strokeText(_text,x,y_) - 在 canvas 上绘制空心的文本
```javascript
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
```
使用 fillText():
1. Canvas -渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
创建了一个线性渐变，使用渐变填充矩形
```
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
```
1. Canvas -图像
  
  把一幅图像放置到画布上, 使用 drawImage(image,x,y) 方法
```
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
```
  把一幅图像放置到了画布上