\src\components\Wave.
vue <template> <div :style="{ height: waveAllHeight + 'px', background: bgColor }" class="wave"> <
canvas id="wave1"></
canvas> <ca ...
转载
2021-09-09 17:20:00
429阅读
2评论
使用
Vue、
Canvas、ElementUI实现的电子签字版，PC和移动端皆可用。效果如下： HTML <template> <section class="signature"> <div class="signatureBox"> <div class="canvasBox" ref="canv ...
转载
2021-09-14 11:01:00
422阅读
点赞
2评论
<template> <view class="content" v-if="isShow" @click.stop="is
原创
2022-09-12 00:27:46
364阅读
<template> <div> <div id="slide_unloack_wraper"> <
canvas width="310" height="155" id="slide_unloack_wraper1"></
canvas> <div id="slide_unloack_inner"> Read More
转载
2020-02-25 01:38:00
206阅读
2评论
要在视图中使用本地资源，您必须通过Webpack加载它们。
原创
2022-12-21 10:22:25
396阅读
方案背景 需求 需要对图片进行标注，导出图片。 需要标注N多图片最后同时保存。 需要根据多边形区域数据（区域、颜色、名称）标注。 对应方案 用canvas实现涂鸦、圆形、矩形的绘制，最终生成图片base编码用于上传 大量图片批量上传很耗时间，为了提高用户体验，改为只实现圆形、矩形绘制，最终保存成
转载
2018-11-03 15:05:00
1492阅读
2评论
以下是一个实现动态海洋和天空效果的 Vue 3 Composition API Hook，使用 Canvas 绘制动画效果：<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
// 动态海洋和天空效果 Hook
export function useOceanSky(canvasRef) {
const
1.安装npm i vue-canvas-nest//如果使用淘宝镜像的话cnpm i vue-canvas-nest//或者yarnyarn
原创
2022-10-28 08:38:45
95阅读
<template> <div class="main"> <
canvas id="
canvas" width="60" :height="cHeight"></
canvas> <a-table ref="myTable" :columns="columns" :data-source="data"
原创
2022-12-13 21:47:59
377阅读
vue3利用qrcode.vue，并通过canvas把本地图片合并，生成海报图片
原创
2024-01-10 13:36:45
202阅读
准备工作：npm install --save html2
canvas 在需要的组件中引入import html2
canvas from "html2
canvas" 需要生成的图片所在的div 要添加<div ref="imageWrapper">.... 方法一：生成blob文件 提交给后端 前端显示的时候显示图片的路径前端methods里添加
html2
canvas(this.$
转载
2021-04-28 21:16:52
720阅读
2评论
1.代码<template> <div class="test" style="background-color: burlywood;"> <canvas id="myCanvas" ref="myCanvas"
原创
2022-09-27 11:53:29
333阅读
前言使用【sign-canvas】组件二次封装自定义手写签名组件，一个基于canvas开发封装实现的通用手写签名板(电子签名板),支持PC端和移动端，效果如
原创
2022-01-12 15:14:41
987阅读
vue 使用 html2canvas 截取图片保存 好久没有写博文了，写够了，没啥想写的了，这个号算是废了，哎
原创
2023-12-26 16:53:15
309阅读
<script> var canvas = document.getElementById('canvas'); var ctxt = canvas.getContext('2d'); var w = canvas.width; var h = canvas.height; //外圆 ctxt.be
转载
2016-06-13 19:21:00
153阅读
2评论
<script type="text/javascript"> function bin2hex(s) { var i, l, o = "", n; s += ""; for (i = 0, l = s.length; i < l; i++) { n = s.charCodeAt(i).toString(16
转载
2022-07-10 00:12:00
249阅读
canvas利用canvas创建一个画布一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.默认情况下 <canvas> 元素没有边框和内容。<canvas>的简单实例如下：<canvas id="myCanvas" width="200" height="100"></canvas>以上代码创建了一个200*100像素的矩
转载
2021-02-08 20:06:47
203阅读
2评论
1）实心矩形。
ctx.fillStyle = 'rgb(0,255,0)';
ctx.fillRect(10,20,50,50); // x,y,width,height
2）空心矩形。
ctx.strokeStyle = 'rgb(0,182,0)';
ctx.lineWidth = 5;
ctx.strokeRect(9,19,52,52);
3）线性渐变。
gradient = c
转载
2010-11-20 21:16:00
191阅读
2评论
