canvas

0-1绘制正方形

代码实现

0-1绘制正方形.vue

<template>
    <canvas id="square" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

function createSquare() {

    //获取canvas
    const canvas = document.getElementById('square')
    //画布对象
    const app = canvas.getContext('2d')
    //填充颜色
    app.fillStyle = 'skyblue';
    //绘制正方形
    app.fillRect(0, 0, 200, 200);
}
onMounted(createSquare)
</script>

0-2绘制长方形

代码实现

0-2绘制长方形.vue

<template>
    <canvas id="rectangle" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

function createRectangle() {

    //获取元素
    const canvas = document.getElementById('rectangle');
    //创建画布
    const app = canvas.getContext('2d');
    //设置填充颜色
    app.fillStyle = 'red';
    //绘制图形
    app.fillRect(0, 0, 400, 200);
}
onMounted(createRectangle)
</script>

0-3绘制圆形

代码实现

0-3绘制空心矩形.vue

<template>
    <canvas id="EmptyRectangle" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

function createSquare() {

    let canvas = document.getElementById('EmptyRectangle');
    let app = canvas.getContext('2d');
    //设置填充颜色
    app.strokeStyle = 'red';
    //设置边框宽度
    app.lineWidth = 50;
    //设置边角类型可以设置：bevel斜角，round圆角，miter尖角
    // app.lineJoin = 'bevel';
    // app.lineJoin = 'round';
    // app.lineJoin = 'miter';
    //默认尖角  在不设置lineJoin值时
    //参数x,y,w,h
    app.strokeRect(50, 50, 400, 400);
}
onMounted(createSquare)
</script>

0-4绘制圆环

代码实现

0-4绘制圆环.vue

<template>
    <canvas id="ring" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

function createRing() {

    let canvas = document.getElementById('ring');
    let app = canvas.getContext('2d');
    //设置填充颜色
    app.strokeStyle = 'red';
    //设置边框宽度
    app.lineWidth = 40;
    //绘制圆的函数arc()圆心,(x,y),r,sAngle起始角，
    // eAngle结束角（弧度制），
    // （可选counterclockwise true顺时针）
    app.arc(200, 200, 160, 0, 2 * Math.PI);
    //画
    app.stroke();
}
onMounted(createRing)
</script>

0-5绘制实心圆

代码实现

0-5绘制实心圆.vue

<template>
    <canvas id="circle" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

function createCircle() {

    let canvas = document.getElementById('circle');
    let app = canvas.getContext('2d');
    //设置填充颜色
    app.fillStyle = 'red';
    //设置边框宽度
    app.lineWidth = 40;
    //绘制圆的函数arc()圆心,(x,y),r,sAngle起始角，
    // eAngle结束角（弧度制），
    // （可选counterclockwise true顺时针）
    app.arc(200, 200, 160, 0, 2 * Math.PI);
    //画
    app.fill();
}
onMounted(createCircle)
</script>

0-6绘制三角形

代码实现

0-6绘制三角形.vue

<template>
    <canvas id="triangle" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

function createTriangle() {
    //获取元素
    let canvas = document.querySelector('#triangle');
    //创建画布
    let app = canvas.getContext('2d');
    //设置填充颜色
    app.fillStyle = 'green';
    //绘制图形
    app.fillRect(0, 0, 500, 500);
    //开始划线
    app.beginPath();
    //设置线宽
    app.lineWidth = 10;
    //从这点开始
    app.moveTo(250, 0);
    //到这点
    app.lineTo(500, 250);
    //接着到这点
    app.lineTo(0, 250)
    //设置划线的颜色
    app.strokeStyle = 'red'
    //将起始点与结束点相连
    app.closePath();
    //画线
    app.stroke();
}
onMounted(createTriangle)
</script>

0-7渐变效果局部填充

代码实现

0-7渐变效果局部填充.vue

<template>
    <canvas id="gradient" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

// 渐变效果局部填充
function createGradient() {
    //获取元素
    let canvas = document.getElementById('gradient');
    //创建画布
    let app = canvas.getContext('2d');
    //创建渐变效果（x0,y0,x1,y1）
    let gradient = app.createLinearGradient(0, 0, 500, 500);
    //开始绘制参数1为位置，2渐变颜色
    gradient.addColorStop(0, 'red')
    gradient.addColorStop(0.5, 'green')
    gradient.addColorStop(1, 'blue')
    //渐变填充
    app.strokeStyle = gradient;
    //边框宽度
    app.lineWidth = 50;
    //绘制图形
    app.strokeRect(100, 100, 300, 300);
    // let canvas = document.querySelector('#canvas');
    // let app = canvas.getContext('2d');
    // let gradient = app.createLinearGradient(0, 0, 500, 500);
    // gradient.addColorStop(0, ' #6666ff');
    // gradient.addColorStop(0.5, " #ffb366");
    // gradient.addColorStop(1, " #4d4dff");

    // app.strokeStyle = gradient;
    // app.lineWidth = 50;
    // app.strokeRect(100, 100, 300, 300)
}
onMounted(createGradient)
</script>

0-8渐变效果全面填充

代码实现

0-8渐变效果全面填充.vue

<template>
    <canvas id="linegradient" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

// 渐变效果局部填充
function createLinearGradient() {
    //获取元素
    let canvas = document.getElementById('linegradient');
    //创建画布
    let app = canvas.getContext('2d');
    //创建渐变效果（x0,y0,x1,y1）
    let gradient = app.createLinearGradient(0, 0, 500, 500);
    //开始绘制参数1为位置，2渐变颜色
    gradient.addColorStop(0, 'red')
    gradient.addColorStop(0.5, 'green')
    gradient.addColorStop(1, 'blue')
    //渐变填充
    app.strokeStyle = gradient;
    //边框宽度
    app.lineWidth = 50;
    //绘制图形
    app.strokeRect(100, 100, 300, 300);
    // let canvas = document.querySelector('#canvas');
    // let app = canvas.getContext('2d');
    // let gradient = app.createLinearGradient(0, 0, 500, 500);
    // gradient.addColorStop(0, ' #6666ff');
    // gradient.addColorStop(0.5, " #ffb366");
    // gradient.addColorStop(1, " #4d4dff");

    // app.strokeStyle = gradient;
    // app.lineWidth = 50;
    // app.strokeRect(100, 100, 300, 300)
}
onMounted(createLinearGradient)
</script>

0-8渐变效果全面填充

代码实现

0-8渐变效果全面填充.vue

<template>
    <canvas id="linegradient" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

// 渐变效果局部填充
function createLinearGradient() {
    //获取元素
    let canvas = document.getElementById('linegradient');
    //创建画布
    let app = canvas.getContext('2d');
    //创建渐变效果（x0,y0,x1,y1）
    let gradient = app.createLinearGradient(0, 0, 500, 500);
    //开始绘制参数1为位置，2渐变颜色
    gradient.addColorStop(0, 'red')
    gradient.addColorStop(0.5, 'green')
    gradient.addColorStop(1, 'blue')
    //渐变填充
    app.strokeStyle = gradient;
    //边框宽度
    app.lineWidth = 50;
    //绘制图形
    app.strokeRect(100, 100, 300, 300);
    // let canvas = document.querySelector('#canvas');
    // let app = canvas.getContext('2d');
    // let gradient = app.createLinearGradient(0, 0, 500, 500);
    // gradient.addColorStop(0, ' #6666ff');
    // gradient.addColorStop(0.5, " #ffb366");
    // gradient.addColorStop(1, " #4d4dff");

    // app.strokeStyle = gradient;
    // app.lineWidth = 50;
    // app.strokeRect(100, 100, 300, 300)
}
onMounted(createLinearGradient)
</script>

0-9某一区域变成透明

代码实现

0-9某一区域变成透明.vue

<template>
    <canvas id="RegionalTransparency" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';
function createRegionalTransparency() {
    //创建画布
    let canvas = document.querySelector('#RegionalTransparency').getContext('2d');
    //设置填充颜色
    canvas.fillStyle = 'red';
    //设置填充区域
    canvas.fillRect(0, 0, 500, 500);
    //清楚区域(x0,y0,x,y)初始值 宽高
    canvas.clearRect(200, 200, 100, 100);
}
onMounted(createRegionalTransparency)
</script>

0-10填充文字

代码实现

0-10填充文字.vue

<template>
    <canvas id="textfill" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';
function createFillText() {
    let canvas = document.getElementById('textfill').getContext('2d');
    canvas.fillStyle = 'red'
    canvas.font = '23px CascadiaMono';
    //设置基线
    canvas.textBaseline = 'top';
    //设置文字位置
    canvas.textAlign = 'left';

    //fillText填充文本 参数一：text文本，参数2：（x,y）(相对于画布)，参数3：Maxheight文字最大高度
    canvas.fillText('今天星期五，明天星期六,再有一天我就要放假了', 1, 100)
    canvas.strokeRect(0, 0, 500, 500);
}
onMounted(createFillText)
</script>

0-11渐变颜色

代码实现

0-11渐变颜色.vue

<template>
    <canvas id="jianbian" width="500" height="100"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';
function createFillText() {
    let canvas = document.getElementById('jianbian').getContext('2d');
    let gradient = canvas.createLinearGradient(0, 0, 500, 100);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(0.5, 'blue');
    gradient.addColorStop(1, 'pink');
    canvas.strokeStyle = gradient;
    canvas.font = '40px CascadiaMono';
    canvas.textAlign = 'left';
    canvas.textBaseline = 'top';
    canvas.strokeText('这是一个canvas渐变效果', 50, 20);
}
onMounted(createFillText)
</script>

0-12图片进行填充

代码实现

0-12图片进行填充.vue

<template>
    <canvas id="imgfill" width="500" height="200"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

// 渐变效果局部填充
function createImgFill() {
    //创建画布
    let canvas = document.getElementById('imgfill').getContext('2d');
    //创建图片对象
    let img = new Image();
    //引入一张本地图片
    img.src = '/images/avatar/logo.png';

    //加载图片
    img.onload = () => {
        canvas.drawImage(img, 200, 0, 200, 200);
    }
}
onMounted(createImgFill)
</script>

0-13图片的缩放

代码实现

0-13图片的缩放.vue

<template>
    <canvas id="imgScale" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';
function createFillText() {
    let el = document.getElementById('imgScale');
    let canvas = el.getContext('2d');
    let img = new Image();
    img.src = '/images/avatar/logo.png';
    // el.heigth = 400;
    img.onload = () => {
        canvas.drawImage(img, 0, 0, img.naturalWidth * scale(img, el), img.naturalHeight * scale(img, el));
    }

    function scale(img, el) {
        // console.log('canvas-width', el.width);
        // console.log('canvas-heigth', el.height);
        // console.log('imgw', img.naturalWidth);
        // console.log(el.width / img.naturalWidth);
        // console.log(el.heigth / img.naturalHeight);
        return Math.min((el.width / img.naturalWidth), (el.height / img.naturalHeight))
    }
}
onMounted(createFillText)
</script>

0-14随机生成像素点

代码实现

0-14随机生成像素点.vue

<template>
    <canvas id="randomdot" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';
function createFillText() {
    console.time();
    let el = document.querySelector('#randomdot')
    let canvas = el.getContext('2d');
    canvas.fillStyle = 'red';
    canvas.fillRect(0, 0, el.width, el.height)
    for (let j = 0; j < 1000; j++) {
        let w = Math.floor(el.width * Math.random())
        let h = Math.floor(el.height * Math.random())
        canvas.fillStyle = '#fff';
        canvas.rect(w, h, 5, 5)
        canvas.fill();
    }
    console.timeEnd();
}
onMounted(createFillText)
</script>

0-15绘制不规则图形

代码实现

0-15绘制不规则图形.vue

<template>
    <canvas id="irregularGraphics" width="500" height="500"> </canvas>
</template>
<script setup>
import { onMounted } from 'vue';

function createSquare() {
    let el = document.querySelector('#irregularGraphics');
    let canvas = el.getContext('2d');
    canvas.fillStyle = '#000000';
    canvas.fillRect(0, 0, el.width, el.height)
    for (let j = 0; j < 15; j++) {
        canvas.beginPath();
        let arrcolor = ['yellow', ' #0047b3', ' #ff0000', 'red', 'pink', 'skyblue']
        canvas.fillStyle = arrcolor[Math.floor(Math.random() * 5)]
        let x = Math.floor(Math.random() * el.width);
        let y = Math.floor(Math.random() * el.height);
        let r = Math.floor(Math.random() * (90 - 20)) + 20;//
        canvas.arc(x, y, r, 0, 2 * Math.PI);
        canvas.closePath()
        canvas.fill()
    }
}
onMounted(createSquare)
</script>