canvas基础

<template>
  <div style="width: 100%;height: 100%;">
    <div class="contentcenter">
      <canvas width="600" height="600" id="mycanvas" style="border: 1px solid black"></canvas>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    methods: {
      initview() {
        var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext("2d");
        /* 概念
        1、画布坐标轴与传统数学坐标轴，关于X轴对称。意味着：X轴正常，Y轴相反，弧度相反
        */

        /* 矩形
        // 填充色
        ctx.fillStyle = "rgb(255,0,0)";
        // 填充矩形选区(起点X轴坐标,起点Y轴坐标,矩形宽度,矩形高度)
        ctx.fillRect(600, 600, -300, -300);
        // 笔划色
        ctx.strokeStyle = "rgb(0,255,0)";
        // 笔划矩形选区(起点X轴坐标,起点Y轴坐标,矩形宽度,矩形高度)
        ctx.strokeRect(600, 300, -300, -300);
        // 清除矩形选区(起点X轴坐标,起点Y轴坐标,矩形宽度,矩形高度)
        ctx.clearRect(375, 375, 150, 150);
        */

        /* 三角形
        // 开启路径
        ctx.beginPath();
        // 至坐标
        ctx.moveTo(150, 150);
        // 直线至坐标
        ctx.lineTo(450, 450);
        ctx.lineTo(450, 150);
        // 闭合路径
        ctx.closePath();
        ctx.fillStyle = "rgb(255,0,0)";
        // 填充
        ctx.fill();
        ctx.strokeStyle = "rgb(0,255,0)";
        // 笔划
        ctx.stroke();
        */

        /* 圆弧
        // 开启路径
        ctx.beginPath();
        // 圆弧(圆心X轴坐标,圆心Y轴坐标,半径,起始弧度,结束弧度,是否逆时针)
        ctx.arc(300, 300, 300, 0, -Math.PI / 2, true);
        // 笔划
        ctx.stroke();
        */

        /* 贝塞尔曲线
        // 开启路径
        ctx.beginPath()
        // 至坐标
        ctx.moveTo(0, 300)
        // 直线至坐标
        ctx.lineTo(150, 300)
        // 贝塞尔曲线(参数1、2控制点1坐标,参数3、4控制点2坐标,...)
        ctx.quadraticCurveTo(300, 300, 300, 450)
        ctx.lineTo(300, 600)
        // 笔划
        ctx.stroke()
        */

        /* 直线
        ctx.beginPath()
        ctx.moveTo(150, 300)
        ctx.lineTo(300, 300)
        ctx.lineTo(300, 450)
        // 线宽
        ctx.lineWidth = 10
        // 端点样式
        var lineCap_valarr = ["butt", "round", "square"]
        ctx.lineCap = lineCap_valarr[1]
        // 拐点样式
        var lineJoin_valarr = ["round", "bevel", "miter"]
        ctx.lineJoin = lineJoin_valarr[1]
        // 虚线([实线长度,虚线长度])
        ctx.setLineDash([0, 10])
        ctx.stroke()
        */

        /* 文本
        ctx.beginPath()
        ctx.moveTo(0, 150)
        ctx.lineTo(600, 150)
        ctx.moveTo(200, 0)
        ctx.lineTo(200, 600)
        ctx.moveTo(0, 450)
        ctx.lineTo(600, 450)
        ctx.stroke()
        // 字体样式
        ctx.font = "bolder 32px 微软雅黑"
        // 字体左右对齐方式
        var textAlign_valarr = ["left", "center", "right"]
        ctx.textAlign = textAlign_valarr[0]
        // 字体上下对齐方式
        var textBaseline_valarr = ["top", "middle", "bottom", "hanging", "alphabetic"]
        ctx.textBaseline = textBaseline_valarr[3]
        ctx.shadowBlur = 10 // 阴影模糊程度
        ctx.shadowColor = 'rgba(0, 0, 0, 1)' // 阴影颜色
        ctx.shadowOffsetX = 10 // 阴影X轴偏移
        ctx.shadowOffsetY = 10 // 阴影Y轴偏移
        // 填充文本(文本内容,文本X轴坐标,文本Y轴坐标)
        ctx.fillText("宁静致远", 200, 150)
        // 笔划文本(文本内容,文本X轴坐标,文本Y轴坐标)
        ctx.strokeText("淡泊明志", 200, 450)
        */

        /* 图片
        var img = new Image();
        img.src = require("../static/tly.jpg");
        img.onload = function () {
          // 画图(图片对象,图片起始X轴坐标,图片起始Y轴坐标)
          ctx.drawImage(img, 0, 0);
          // 画图(图片对象,图片起始X轴坐标,图片起始Y轴坐标,图片缩放宽度,图片缩放高度)
          ctx.drawImage(img, 0, 0, 300, 300);
          // 画图(图片对象,原图裁剪起始X轴坐标,原图裁剪起始Y轴坐标,原图裁剪宽度,原图裁剪高度,裁剪图起始X轴坐标,裁剪图起始Y轴坐标,裁剪图缩放宽度,裁剪图缩放高度)
          ctx.drawImage(img, 0, 0, 300, 300, 300, 0, 300, 300);
        }
        */

        /* 状态的保存和恢复
        ctx.fillStyle = "#ff0000"
        // save相当于数组的push，存储状态(strokeStyle、fillStyle、translate...)
        ctx.save()
        ctx.fillRect(0, 0, 100, 100)
        ctx.fillStyle = "#00ff00"
        ctx.save()
        ctx.fillRect(100, 100, 100, 100)
        ctx.fillStyle = "#0000ff"
        ctx.save()
        ctx.fillRect(200, 200, 100, 100)
        // restore相当于数组的pop，返回最后一个push的状态
        ctx.restore()
        ctx.fillRect(300, 300, 100, 100)
        ctx.restore()
        ctx.fillRect(400, 400, 100, 100)
        ctx.restore()
        ctx.fillRect(500, 500, 100, 100)
        */

        /* 变形
        ctx.save()
        // 偏移(X轴偏移距离,Y轴偏移距离)
        ctx.translate(100, 100)
        ctx.fillRect(0, 0, 100, 100)
        ctx.restore()
        ctx.save()
        // 旋转(旋转角度)
        ctx.rotate(Math.PI / 4)
        ctx.fillRect(Math.pow(80000, 0.5), 0, 100, 100)
        ctx.restore()
        ctx.save()
        // 缩放(X轴缩放大小,Y轴缩放大小)
        ctx.scale(2, 2)
        ctx.fillRect(150, 150, 100, 100)
        */

        /* 路径裁剪
        ctx.beginPath();
        ctx.arc(300, 300, 100, 0, -Math.PI * 2, true);
        // 裁剪要在填充(fill)或笔划(stroke)之前
        ctx.clip();
        ctx.fillStyle = "#ff0000";
        ctx.fillRect(200, 200, 200, 200);
        */
        
        /* 线性渐变
        let gradient = ctx.createLinearGradient(0, 0, 300, 300);
        gradient.addColorStop(0, "rgba(255, 0, 0, 1)");
        gradient.addColorStop(1, "rgba(0, 0, 255, 1)");
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 600, 600);
        */

        /* 径向渐变
        // 参数: 起始圆X坐标, 起始圆Y坐标, 起始圆半径, 结束圆X坐标, 结束圆Y坐标, 结束圆半径
        let radialGradient = ctx.createRadialGradient(300, 300, 0, 300, 300, 300);
        radialGradient.addColorStop(0, "rgba(255, 0, 0, 1)");
        radialGradient.addColorStop(0.5, "rgba(0, 255, 0, 1)");
        radialGradient.addColorStop(1, "rgba(0, 0, 255, 1)");
        ctx.fillStyle = radialGradient;
        ctx.fillRect(0, 0, 600, 600);
        */

        /* 动画 */
        let count = 0
        requestAnimationFrame(function animate() {
          ctx.clearRect(0, 0, 600, 600)
          ctx.save()
          ctx.fillRect(count, count, 100, 100)
          ctx.fillStyle = "red"
          ctx.fillRect(count + 25, count + 25, 50, 50)
          ctx.restore()
          count++
          requestAnimationFrame(animate)
        })
      }
    },
    mounted() {
      this.initview()
    }
  }
</script>

<style scoped>
  .contentcenter {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>