canvas相关学习

<script setup>
import { ref, reactive, computed, watchEffect, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, toRefs, toRaw, provide, inject, } from 'vue'
const canvasBox = ref(null)

onMounted(() => {
    // console.log([(Math.PI) / 180] * 360)
    canvasBox.value.width = "1200"
    canvasBox.value.height = "2000"
    let ctx = canvasBox.value.getContext('2d')
    // // 开启一条新路径，生成之后，图形绘制命令会被指向到新路径上；
    // ctx.beginPath()
    // // 定义画线的起始点
    // ctx.moveTo(x, y)
    // // 定义画线的折点
    // ctx.lineTo(x, y)
    // //线条颜色
    // ctx.strokeStyle = "#fab6b6"
    // // 线条宽度
    // ctx.lineWidth = 20

    // ctx.lineCap = 'round/butt/square' 设置线帽为圆型/默认/方形


    // ctx.lineJoin = 'miter/round/bevel'：设置线段连接处为默认/圆形/平直形式；

    // ctx.globalAlpha  = 数字：设置图案的透明度

    //  通过线条来绘制图形轮廓
    // ctx.stroke()
    //  // 关闭上一条路径的绘制
    // ctx.closePath()
    // 画矩形
    //  ctx.strokeRect(x, y, 宽, 高) 或者 ctx.rect(x, y, 宽, 高)+ctx.stroke()
    // 填充方法 将stroke更换成fill

    // ctx.fillStyle  = '#d10e8c' 
    //  ctx.rect(780, 150, 300, 300)
    // ctx.fill()
    // 或者
    // ctx.fillStyle  = '#d10e8c' 
    // ctx.fillRect(780, 150, 300, 300)

    // 画圆形
    // ctx.arc(x,y,r,ang,顺时针逆时针)

    // 画弧度
    // ctx.arcTo(x,y,x,y,r)+ctx.lineTo(x,y)
    // 画椭圆
    // ctx.ellipse(x, y, xr, yr, 旋转角度, 开始角度, 结束角度, false)
    // 画虚线
    // ctx.setLineDash([])  ctx.getLineDash()
    // 画三角形
    ctx.beginPath()
    ctx.moveTo(300, 20)
    ctx.lineTo(100, 100)
    ctx.lineTo(500, 100)
    ctx.lineTo(300, 20) // 第四个点要和第一个点的坐标一致才能画出三角形
    ctx.strokeStyle = "#fab6b6"
    ctx.lineWidth = 20
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'
    // ctx.globalAlpha = 0.6
    ctx.closePath()
    ctx.stroke()
    // 画矩形
    ctx.beginPath()
    ctx.moveTo(100, 150)
    ctx.lineTo(100, 400)
    ctx.lineTo(400, 400)
    ctx.lineTo(400, 150)
    ctx.lineTo(100, 150)
    ctx.strokeStyle = "blue"
    ctx.lineWidth = 20
    ctx.lineJoin = 'round'
    ctx.closePath()
    ctx.stroke()

    // 或者
    ctx.beginPath()
    ctx.strokeStyle = '#0ed1a4'

    ctx.strokeRect(450, 150, 300, 200) // 起点为(200,150)，宽300像素，高300像素


    ctx.closePath()
    // 再或者
    ctx.beginPath()
    let gradient = ctx.createLinearGradient(780, 150, 1080, 0);
    gradient.addColorStop(0, "#d10e8c"); // 第一个偏移值为0
    gradient.addColorStop(1, "#0ed1a4"); // 第一个偏移值为1
    ctx.fillStyle = gradient
    ctx.rect(780, 150, 300, 300)
    ctx.fill()

    // ctx.fillRect(780, 150, 300, 300)
    ctx.closePath()


    // 画圆
    ctx.beginPath()
    ctx.arc(180, 600, 100, 0, [(Math.PI) / 180] * 360, true)
    var gradient1 = ctx.createRadialGradient(180, 600, 0, 180, 600, 100);
    gradient1.addColorStop(0, "#ffe000");
    gradient1.addColorStop(1, "skyblue")
    ctx.fillStyle = gradient1
    ctx.fill()
    ctx.closePath()
    // 画圆弧
    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.arc(480, 600, 100, [(Math.PI) / 180] * 30, [(Math.PI) / 180] * 330, false)
    ctx.lineTo(480, 600)
    ctx.fillStyle = '#ffe000'
    ctx.closePath()
    ctx.fill()

    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.arc(480, 550, 10, 0, [(Math.PI) / 180] * 360, false)
    ctx.lineTo(480, 600)
    ctx.fillStyle = 'black'
    ctx.closePath()
    ctx.fill()

    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.arc(520, 600, 10, 0, [(Math.PI) / 180] * 360, false)
    ctx.lineTo(480, 600)
    ctx.fillStyle = '#ffe000'
    ctx.closePath()
    ctx.fill()

    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.arc(570, 600, 10, 0, [(Math.PI) / 180] * 360, false)
    ctx.lineTo(480, 600)
    ctx.fillStyle = '#ffe000'
    ctx.closePath()
    ctx.fill()


    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.arc(620, 600, 10, 0, [(Math.PI) / 180] * 360, false)
    ctx.lineTo(480, 600)
    ctx.fillStyle = '#ffe000'
    ctx.closePath()
    ctx.fill()
    // 画弧度其他方法
    ctx.beginPath()
    ctx.moveTo(780, 600)
    ctx.arcTo(880, 700, 900, 900, 30)

    ctx.stroke()
    ctx.closePath()
    // 画椭圆
    ctx.beginPath()
    ctx.ellipse(200, 950, 100, 50, [(Math.PI) / 180] * 0, [(Math.PI) / 180] * 0, [(Math.PI) / 180] * 360, false)
    ctx.fillStyle = "#ffe000"
    ctx.fill()
    ctx.closePath()
    // 二次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(400, 950);
    ctx.quadraticCurveTo(400, 990, 300, 1200);
    ctx.stroke();
    ctx.closePath()
    // 虚线
    ctx.beginPath();
    ctx.moveTo(500, 950);
    ctx.lineTo(1100, 950);
    ctx.lineWidth = 10
    ctx.setLineDash([10, 50, 30, 20])

    ctx.stroke();
    ctx.closePath()
    console.log(ctx.getLineDash());
    ctx.setLineDash([])
    // 文本
    ctx.beginPath();
    ctx.font = '20px Verdana'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'top'
    ctx.direction = 'rtl'
    ctx.lineWidth = 1
    ctx.strokeStyle = "black"
    ctx.strokeText('Hello Canvas!', 100, 1300, 400)
    console.log('文本的宽度为：', ctx.measureText('Hello Canvas!').width);
    ctx.closePath()



    ctx.beginPath();
    var img = new Image();
    img.src = 'http://panpan.dapanna.cn//image-20221009113426344.png';
    img.onload = function () {
           ctx.shadowOffsetX = 10 // 向x轴正方向平移10像素
        ctx.shadowOffsetY = 10 // 向y轴正方向平移10像素
        ctx.shadowBlur = 3 // 设置阴影模糊度
        ctx.shadowColor = '#ccc' // 设置阴影颜色
        ctx.drawImage(img, 100, 100, 300, 300, 500, 1300, 500, 500);
        ctx.closePath()

    }


})

</script>