画布基础篇 第一章

canvas 重要属性 1.fillStyle&fillRect
!!! fillStyle要写在fillRect之前
属性设置或返回用于填充绘画的颜色、渐变或模式。yang.fillRect(20,20,150,100);//(x,y,width,height)
例子:

var canvas = document.getElementById(id);
		var context = canvas.getContext('2d');
		context.fillStyle='black';
		context.fillRect(20,20,150,100);//(x,y,width,height)
	       // 2.fillText & strokeText  对应的是  fillStyle  &  strokeStyle 	
		fillText()// 方法在画布上绘制填色的文本。文本的默认颜色是黑色。  
		context.fillText(text,x,y,maxWidth);// text：文本  x：文本x轴位于的位置   y:文本y轴位于的位置

		//   strokeText  () 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
		context.strokeText  (text,x,y,maxWidth);// text：文本  x：文本x轴位于的位置   y:文本y轴位于的位置
		var canvas = document.getElementById(id);
		var context = canvas.getContext('2d');
		context .fillStyle = '#0099CC';
		context .fillText('阳 - 前端',25,130);
		context .strokeStyle = '#000';
		context .strokeText(''阳 - 前端',25,260);

contextType参数有以下四种：
“2d”：创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。
“webgl”(或"experimental-webgl")：创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 2的浏览器上可用，实验性特性。
“webgl2”：创建一个WebGL2RenderingContext对象作为3D渲染的上下文，只在实现了WebGL 3的浏览器上可用。
“bitmaprenderer”：创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性。

context基本的颜色变化 ：addColorStop createLinearGradient

1.addColorStop：这个方法有两个参数，按顺序是梯度，color，梯度的取值要在0-1之间，不然会报错，这个方法决定了完成颜色渐变所需的长度，
从0到1，意味这渐变知道长度结束才完成
2.createLinearGradient：这个是canvas的context的一个方法，参数按顺序是x0, y0, x1, y1，按我的理解其实就是定义了一根线，
颜色沿着这条线的指向进行渐变

代码实练：

 <div>
    <div>
      <p>第一张画布</p>
      <canvas
        ref="canvasone"
        id="canvasid"
        style="width:300px;height:300px"
      ></canvas>
      <button @click="canvasonexian('xian')">线性渐变</button>
      <button @click="canvasonexian('jing')">径向渐变</button>
    </div>
  </div>

methods: {
    canvasonexian(demoone) {
      let myCanvasone = this.$refs.canvasone;
      let canvasCon = myCanvasone.getContext("2d");
      let onedemo;
      if (demoone == "xian") {
        onedemo = canvasCon.createLinearGradient(0, 0, 100, 100);
        onedemo.addColorStop(0, "yellow");
        onedemo.addColorStop(0.1, "green");
        onedemo.addColorStop(0.2, "black");
        onedemo.addColorStop(0.3, "orange");
        onedemo.addColorStop(0.5, "red");
        onedemo.addColorStop(0.8, "white");
        onedemo.addColorStop(1, "white");
      } else if (demoone == "jing") {
        onedemo = canvasCon.createLinearGradient(120, 100, 5, 120,70,50);
        // canvasCon .fillStyle = '#0099CC';
		// canvasCon .fillText('阳 - 前端',25,130);
		// canvasCon .strokeStyle = '#000';
		// canvasCon .strokeText('阳 - 前端',25,260);
        onedemo.addColorStop(0, "yellow");
        onedemo.addColorStop(0.5, "red");
        onedemo.addColorStop(1, "white");
      }
      canvasCon.fillStyle = onedemo
      canvasCon.fillRect(20,20,100,100)
    },
  },