canvas学习

画布学习

自己用vue组件写的一个demo,便于以后使用时实时查看，特此留下笔记，其中图片到时自己随便从其他地方找几张就可以使用啦。

效果图

<template>
    <div>

        <canvas id="canvas" ref="canvas" class="canvas"></canvas>
        <div class="bg">
            <button @click="drawRect()">画矩形</button>
            <button @click="drawLine()">画线</button>
            <button @click="drawLine2()">画三角形</button>
            <button @click="drawLine3()">画填充三角形</button>
            <button @click="drawPi()">画圆</button>
            <button @click="drawPi2()">画圆弧</button>
            <button @click="drawPi3()">画填充圆弧</button>
            <button @click="drawPi4()">画圆弧arcTo折线</button>
            <button @click="drawstrokeRect()">画边框矩形</button>
            <button @click="drawRect2()">画内空矩形</button>
            <button @click="drawQuadraticCurveTo()">画二次贝塞尔曲线</button>
            <button @click="drawBezierCurveTo()">画三次贝塞尔曲线</button>
            <button @click="testFillStyle()">查看fillStyle</button>
            <button @click="testStrokeStyle()">查看strokeStyle</button>
            <button @click="testGlobalAlpha()">查看globalAlpha</button>
            <button @click="testLineStyle()">查看线宽</button>
            <button @click="testLineCap()">查看线条末端样式</button>
            <button @click="testLineJion()">查看线条与线条结合样式</button>
            <button @click="testSetLineDash()">虚线</button>
            <button @click="testText()">设置文本</button>
            <button @click="drawImg()">设置图片背景</button>
            <button @click="drawImg2()">设置图片切片</button>
            <button @click="testSave()">save和restore</button>
            <button @click="testTranslate()">变形tranlate</button>
            <button @click="testRotate()">旋转roate</button>
            <button @click="testScale()">缩放scale</button>
            <button @click="testTransform()">变性矩阵transform</button>
            <button @click="testGlobalCompositeOperation1()">合成source-over</button>
            <button @click="testGlobalCompositeOperation2()">合成source-in</button>
            <button @click="testGlobalCompositeOperation3()">合成source-out</button>
            <button @click="testGlobalCompositeOperation4()">合成source-atop</button>
            <button @click="testGlobalCompositeOperation5()">合成destination-over</button>
            <button @click="testGlobalCompositeOperation6()">合成destination-in</button>
            <button @click="testGlobalCompositeOperation7()">合成destination-out</button>
            <button @click="testGlobalCompositeOperation8()">合成destination-atop</button>
            <button @click="testGlobalCompositeOperation9()">合成lighter</button>
            <button @click="testGlobalCompositeOperation10()">合成darken</button>
            <button @click="testGlobalCompositeOperation11()">合成lighten</button>
            <button @click="testGlobalCompositeOperation12()">合成xor</button>
            <button @click="testClip()">剪裁路径</button>
            <button @click="testAnimate()">动画-太阳系</button>
            <button @click="testCreateLinearGradient()">渐变色</button>
            <button @click="testLineToLine()">蝌蚪线</button>
            <button @click="stopAnimate()">暂停动画</button>
            <button @click="holdAnimate()">继续动画</button>
            <button @click="clearRectFn()">清空整个画布</button>
            
            
        </div>
        
    </div>
</template>

<script>
import Img1 from "../assets/2.jpg"
import Img3 from "../assets/3.jpeg"
import Sun from "../assets/sun.png"
import Earth from "../assets/earth.png"
import Moon from "../assets/moon.png"

import LineClass from './lineClass.js';

export default {
   
    data(){
   
        return{
   
            ctx:null,
            Img1,
            Img3,
            Sun,
            Earth,
            Moon,
            animate:null,
            myArr:[],
            startAnimateBool:false
        }
    },
    mounted(){
   
        
        
        if(this.$refs.canvas.getContext){
   
            this.ctx = this.$refs.canvas.getContext("2d");
        }else{
   
            return;
        }
        
        this.$refs.canvas.height=Math.floor(document.body.clientHeight);
        this.$refs.canvas.width=Math.floor(document.body.clientWidth);
       
    },
    computed:{
   

    },
    watch:{
   

    },
    methods: {
   
        clearRectFn(){
   //清空所有
            this.ctx.clearRect(0,0,this.$refs.canvas.width,this.$refs.canvas.height);
        },
        drawRect2(){
   
            this.ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
            this.ctx.fillRect(200,200,400,400);
             this.ctx.clearRect(220,220,100,100);
             this.ctx.clearRect(480,220,100,100);
            this.ctx.beginPath();
             this.ctx.strokeStyle = '#ffffff';//线颜色
            this.ctx.arc(400, 400, 50, 0, Math.PI, false);
            this.ctx.stroke();
        },
        drawstrokeRect(){
   //画矩形边框
            this.ctx.strokeStyle = 'red';//线颜色
            this.ctx.lineWidth = 10;//线粗细
            this.ctx.strokeRect(200,200,300,300);
        },
        drawRect(){
   //画矩形
            this.ctx.fillStyle="#FF0000";
            //this.ctx.fillRect(100,100,150,75);
            //context.fillRect(x, y, width, height);
            //x:填充矩形的起点横坐标,y:填充矩形的起点纵坐标,width:填充矩形宽,height:填充矩形高,
            // 中心点坐标
            var centerX = this.$refs.canvas.width / 2;
            var centerY = this.$refs.canvas.height / 2;
            // 矩形填充

            this.ctx.fillRect(centerX - 30, centerY - 4, 60, 8);
             this.ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            this.ctx.fillRect(centerX - 4, centerY - 30, 8, 60);
        },
         drawLine3(){
   //画填充三角形
            this.ctx.moveTo(210,110);
            this.ctx.lineTo(350,150);
            this.ctx.lineTo(310,350);
            this.ctx.fill();
        },
        drawLine2(){
   //画三角形
            this.ctx.moveTo(210,110);
            this.ctx.lineTo(350,150);
            this.ctx.lineTo(310,350);
            this.ctx.closePath();
            this.ctx.stroke();
        },
        drawLine(){
   //画线
            this.ctx.moveTo(310,310);
            this.ctx.lineTo(450,350);
            this.ctx.lineTo(410,450);
            this.ctx.stroke();
        },
        drawPi(){
   //画圆
            this.ctx.fillStyle="#FF0000";
            this.ctx.beginPath();
            this.ctx.arc(370,218,50,0,