vue中实现canvas画布基本操作

<template><div class="practice-html5"><div><p>canvas1</p><canvas ref="canvasTest1" id="canvasTest" /><button @click="canvasDrawCol('linearGradient')">线性渐变</button><button @click="canvasDrawCol('radialGradient')">径向/圆渐变</button></div><div><p>canvas2</p>图片：<img id="lamp" src="https://www.w3cschool.cn/statics/images/lamp.jpg" alt="picture">画布：<canvas ref="canvasTest2" id="canvasTest"/>按钮：<button @click="canvasDrawRepeat('repeat')">重复</button><button @click="canvasDrawRepeat('repeat-x')">重复-x</button><button @click="canvasDrawRepeat('repeat-y')">重复-y</button><button @click="canvasDrawRepeat('no-repeat')">不重复</button>  </div><div><p>canvas3</p><canvas ref="canvasTest3" id="canvasTest"/><button @click="canvasDrawLine('line')">线</button><button @click="canvasDrawLine('circle')">圆</button></div><div><p>canvas4</p><canvas ref="canvasTest4" id="canvasTest"/><button @click="canvasDrawText('fillText')">实心text</button><button @click="canvasDrawText('strokeText')">空心text</button></div><div><p>canvas5</p><img id="img" src="https://atts.w3cschool.cn/attachments/image/20160224/1456314599613373.jpg" alt="picture">画布：<canvas ref="canvasTest5"/></div></div>
</template><script>
export default {mounted () {let myCanvas5 = this.$refs.canvasTest5 ;  myCanvas5.width = 220 ;  // 不可在css或者标签上直接设置画布大小，这样展示的图片会进行拉伸收缩，效果很差myCanvas5.height = 277 ;let img = new Image() ;img.src = "https://atts.w3cschool.cn/attachments/image/20160224/1456314599613373.jpg" ;img.onload = function(){let canvas5Set = myCanvas5.getContext("2d") ;canvas5Set.drawImage(this,0,0) ; }},methods : {canvasDrawCol (optype) {   //  画布颜色渐变操作let myCanvas1 = this.$refs.canvasTest1 ;// let myCanvas1 = document.getElementById("canvasTest")let canvas1Set = myCanvas1.getContext("2d") ;// canvas1Set.fillStyle = "green" ;// canvas1Set.fillRect(0,0,100,100) ;let myGradient ;if(optype === 'linearGradient'){myGradient = canvas1Set.createLinearGradient(0,0,100,100) ;myGradient.addColorStop(0,"black") ;myGradient.addColorStop(0.5,"yellow") ;myGradient.addColorStop(1,"green") ;}else if(optype === 'radialGradient'){myGradient = canvas1Set.createRadialGradient(125,75,5,125,75,50) ;myGradient.addColorStop(0,"black") ;myGradient.addColorStop(0.5,"yellow") ;myGradient.addColorStop(1,"green") ;}canvas1Set.fillStyle = myGradient ;canvas1Set.fillRect(20,20,200,100) ;},canvasDrawRepeat (optype) {   // 图片重复操作let myCanvas2 = this.$refs.canvasTest2 ;let canvas2Set = myCanvas2.getContext("2d") ;canvas2Set.clearRect(0,0,myCanvas2.width,myCanvas2.height) ;let lampPicture = document.getElementById("lamp") ;let pat = canvas2Set.createPattern(lampPicture,optype) ;canvas2Set.fillStyle = pat ;canvas2Set.fillRect(0,0,300,150) ;},canvasDrawLine (optype) {  //  画布执行绘画线、圆let myCanvas3 = this.$refs.canvasTest3 ;let canvas3Set = myCanvas3.getContext("2d") ;canvas3Set.clearRect(0,0,myCanvas3.width,myCanvas3.height) ;if(optype === 'line'){canvas3Set.beginPath() ;   // 添加一个路径 同时清除上一个路径   如果不执行该操作  上一个路径的操作将不会清除 依旧会再画布上绘画出来canvas3Set.moveTo(0,0) ;canvas3Set.lineTo(myCanvas3.width,myCanvas3.height) ;}else if(optype === 'circle'){canvas3Set.beginPath() ;canvas3Set.arc(150,75,60,0,2*Math.PI) ;}canvas3Set.stroke() ;},canvasDrawText (optype) {   //   文本操作let myCanvas4 = this.$refs.canvasTest4 ;let canvas4Set = myCanvas4.getContext("2d") ;canvas4Set.clearRect(0,0,myCanvas4.width,myCanvas4.height) ;canvas4Set.font = "30px Arial" ;if(optype === 'fillText'){canvas4Set.fillText("canvas Test",10,50) ;}else if(optype === 'strokeText'){canvas4Set.strokeText("canvas Test",10,50) ;}}}
}
</script>
<style lang="scss">
.practice-html5{width: 100% ;#canvasTest{height: 150px ;width: 300px ;background: gray ;}
}
</style>

效果展示：

重点：beginpath()
clearRect()
画布设置宽高后再添加图片

vue中实现canvas画布基本操作相关推荐

在vue中使用canvas实现简单特效（下雨天）
效果展示还不了解canvas的同学可以先看一下官方的api https://www.canvasapi.cn 话不多说直接上代码在页面中添加canvas标签 <template>< ...
vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）
需求:在h5网页中打开pdf文件,要求给文件添加水印实现技术及插件:vue,vue-pdf,canvas 插件安装: npm i vue-pdf --save npm i pdf-lib --sav ...
HTML5 中的 canvas 画布（二）
绘制图片一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image(); // 先创建图片对象 image.src = '图片的 ...
vue中使用canvas手写输入识别中文
效果图前言最近做一个室外大屏项目,系统上的输入法使用不方便,客户要求做一个嵌入web网页的手写输入法. 核心后端接口api:使用 QQ输入法手写接口 https://handwriting.sh ...
vue中使用canvas实现移动端手写板、电子签名功能
直接上Demo <template><div class="hello"><button type v-on:click="clear&qu ...
记录下vue中使用canvas：给漂浮的圆球加阴影（发光边）
漂的气泡不同的外阴影(发光边)就这样场景:随机生成几个透明的发光的圆,滚来滚去,里面显示文字,每个圆可点击,携带参数跳转不同路由. 1.原想用strokeStyle画,但是出来后特别浅淡,基本看不见 ...
Vue中利用canvas添加炫动背景
1.展示页面 <template><div id="main"><canvas id="myCanvas" style=" ...
【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )
文章目录一.鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 1.保存当前鼠标指针指向的位置 2.根据鼠标指针指向的位置以及比例重新计算图片位置二.绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩 ...
html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...

vue中实现canvas画布基本操作

vue中实现canvas画布基本操作相关推荐

最新文章

热门文章