canvas
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绘制长方形
代码实现
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绘制圆形
代码实现
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绘制圆环
代码实现
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绘制实心圆
代码实现
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绘制三角形
代码实现
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渐变效果局部填充
代码实现
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渐变效果全面填充
代码实现
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渐变效果全面填充
代码实现
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某一区域变成透明
代码实现
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填充文字
代码实现
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渐变颜色
代码实现
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图片进行填充
代码实现
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图片的缩放
代码实现
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随机生成像素点
代码实现
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绘制不规则图形
代码实现
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>