vue中使用canvas绘图详解
更新时间：2024年09月06日 09:04:02 作者：@小鱼游啊游
这篇文章主要介绍了vue中使用canvas绘图方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
canvas基本使用
HTML5 的 <canvas> 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
路径线段
<template lang="pug">
div
// 规定矩形区域的宽和高
<canvas id="myCanvas" width="500" height="300"></canvas>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
this.xianDuan()
},
methods: {
xianDuan(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0); // moveTo(x,y) 定义线条开始坐标
ctx.lineTo(200,100); // lineTo(x,y) 定义线条结束坐标
ctx.stroke();
},
}
}
</script>运行效果：
三角形
- 无填充色
mounted() {
this.sanJiaoXing()
},
methods: {
sanJiaoXing(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 200);
ctx.lineTo(400, 200);
ctx.lineTo(0, 0);
ctx.stroke(); // 无填充色
},
}运行效果：
- 有填充色
mounted() {
this.sanJiaoXing()
},
methods: {
sanJiaoXing(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 200);
ctx.lineTo(400, 200);
ctx.lineTo(0, 0);
ctx.fill(); // 有填充色
},
}
圆
使用 arc() 方法 绘制一个圆：
mounted() {
this.yuan()
},
methods: {
yuan() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI); // Math.PI圆周率π = 3.14 = 180°
ctx.stroke();
},
}
- canvas实现笑脸
mounted() {
this.xiaoLian()
},
methods: {
xiaoLian() {
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
ctx.stroke();
},
}
字体
mounted() {
this.ziTi()
},
methods: {
ziTi() {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.font="30px Arial"; // 设置字体及大小
ctx.fillText("Hello World 泥巴巴", 10, 150); // 实心文字
ctx.strokeText("Hello World 泥巴巴", 10, 180); // 空心文字
}
}
渐变
mounted() {
this.jianBian()
},
methods: {
jianBian() {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 200,0); // 设置渐变
grd.addColorStop(0,"red"); // 渐变起始颜色
grd.addColorStop(1,"orange"); // 渐变结束色
ctx.fillStyle = grd; // 填充色
ctx.fillRect(10,10,200,100); // (x,y,width,height) 矩形坐标和宽高
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue 3 引入了 Composition API,其中 watchEffect 是一个非常强大的工具,用于响应式地追踪依赖项的变化,本文将详细介绍 watchEffect 的使用方法和相关概念,文中有详细的代码供大家参考,需要的朋友可以参考下2024-08-08
这篇文章主要为大家详细介绍了Vue.js实现点击左右按钮图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要介绍了element滚动条组件el-scrollbar的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了基于vue+axios+lrz.js微信端图片压缩上传方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了使用webpack搭建vue项目的方法，本文以开发环境为例，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
在VUE开发项目的过程中,插槽<slot>是重要的承载分发内容的出口,下面这篇文章主要给大家介绍了关于Vue3插槽(slot)使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要给大家介绍了关于vue设置全局变量的5种方法,通过设置的方法可以让你的数据无处不在,在项目中经常会复用一些变量和函数,比如用户的登录token,用户信息等,这时将它们设为全局的就显得很重要了,需要的朋友可以参考下2023-11-11
这篇文章是介绍一下vue3中的hooks以及它的用法，主要围绕两点来介绍，一个是hooks基本概念，另一个是vue3中hooks的使用方法，本文结合实例代码给大家讲解的非常详细，需要的朋友参考下吧2023-03-03
这篇文章主要为大家详细介绍了vue+animation实现翻页动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
今天小编就为大家分享一篇对vue中v-if的常见使用方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论