官网

http://fabricjs.com/ 一个canvas框架
项目地址

效果

代码

<template><div class="home"><p><label>Pattern left offset</label><input type="range" min="0" max="500" value="0" id="img-offset-x"></p><canvas id="canvas" width="1565" height="929"></canvas></div>
</template><script setup>
import {onMounted} from "vue";let canvas, rect, patternSourceCanvas, pattern;fabric.Sprite = fabric.util.createClass(fabric.Image, {type: 'sprite',spriteWidth:  50,spriteHeight: 72,spriteIndex: 0,frameTime: 100,initialize: function(element, options) {options || (options = { });options.width = this.spriteWidth;options.height = this.spriteHeight;this.callSuper('initialize', element, options);this.createTmpCanvas();this.createSpriteImages();},createTmpCanvas: function() {this.tmpCanvasEl = fabric.util.createCanvasElement();this.tmpCanvasEl.width = this.spriteWidth || this.width;this.tmpCanvasEl.height = this.spriteHeight || this.height;},createSpriteImages: function() {this.spriteImages = [ ];var steps = this._element.width / this.spriteWidth;for (var i = 0; i < steps; i++) {this.createSpriteImage(i);}},createSpriteImage: function(i) {var tmpCtx = this.tmpCanvasEl.getContext('2d');tmpCtx.clearRect(0, 0, this.tmpCanvasEl.width, this.tmpCanvasEl.height);tmpCtx.drawImage(this._element, -i * this.spriteWidth, 0);var dataURL = this.tmpCanvasEl.toDataURL('image/png');var tmpImg = fabric.util.createImage();tmpImg.src = dataURL;this.spriteImages.push(tmpImg);},_render: function(ctx) {ctx.drawImage(this.spriteImages[this.spriteIndex],-this.width / 2,-this.height / 2);},play: function() {var _this = this;this.animInterval = setInterval(function() {_this.onPlay && _this.onPlay();_this.dirty = true;_this.spriteIndex++;if (_this.spriteIndex === _this.spriteImages.length) {_this.spriteIndex = 0;}}, this.frameTime);},stop: function() {clearInterval(this.animInterval);}
});fabric.Sprite.fromURL = function(url, callback, imgOptions) {fabric.util.loadImage(url, function(img) {callback(new fabric.Sprite(img, imgOptions));});
};fabric.Sprite.async = true;function init() {canvas = new fabric.Canvas('canvas');rect = new fabric.Rect({top: 100,left: 100,width: 1565,height: 50, objectCaching: false,});canvas.add(rect);fabric.Image.fromURL('/img/road2.jpg', function(oImg) {patternSourceCanvas = new fabric.StaticCanvas();patternSourceCanvas.add(oImg);patternSourceCanvas.renderAll();pattern = new fabric.Pattern({source: patternSourceCanvas.getElement(),repeat: 'repeat',});rect.set('fill', pattern);canvas.requestRenderAll();document.getElementById('img-offset-x').oninput = function () {pattern.offsetX = parseInt(this.value, 10);console.log(pattern.offsetX)canvas.requestRenderAll();};})let createSprite = () => {return function(sprite) {sprite.set({left: 500,top: 500,});canvas.add(sprite);sprite.scale(4).setCoords();canvas.requestRenderAll();setTimeout(function() {sprite.set('dirty', true);sprite.play();}, fabric.util.getRandomInt(1, 10) * 100);};}fabric.Sprite.fromURL('/img/fire.png', createSprite(), {spriteWidth: 1200/15,spriteHeight: 85,});}function animal () {if (pattern && patternSourceCanvas){pattern.offsetX = pattern.offsetX + 2;canvas.requestRenderAll();}requestAnimationFrame(animal)
}onMounted(() => {init()animal()
})</script><style lang="less">
.home {height: 100%;
}
</style>

canvas火焰动画、管线流动动画-Fabric.js相关推荐

Fabric.js 删除元素（带过渡动画）
本文简介 Fabric.js 提供了2个方法删除对象. 一个是直接删除,另一个方法是带过渡动画删除元素(淡出动画). 本文重点讲带过渡动画删除元素的方法,还会讲到设置过渡时长 .删除后的 ...
Canvas实用库Fabric.js使用手册
简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的 ...
vue 创建图片坐标点_利用vue+fabric.js获取图片坐标，并实现图片拖拽、旋转、拉伸等功能...
什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具. ...
echarts中国地图线性流动动画js特效
下载地址使用百度的图表插件echarts.js制作的中国地图线性流动动画特效,可以在网页制作中实现总公司到分公司业务展示.物流.路线等网页设计内容. dd:
【FFH】Canvas实现帧动画及封装（OpenHarmony JS UI）
目录C Demo展示实现思路代码封装 canvas绘制图像动画播放代码调用 Demo展示这里以Tom猫(多年前热门的移动端互动小游戏)为例: 实现思路首先要了解帧动画播放的原理--正如我们 ...
五十个html js特效动画,html5 canvas酷炫的月食动画特效
特效描述:html5 canvas 月食动画特效.html5月食动画代码结构 1. 引入JS 2. HTML代码 varying vec3 vNormal; void main() { vNorma ...
强大的Canvas开源库Fabric.js简介与开发指南
什么是Fabric.js? Fabric.js 是一个强大且简单的Javascript HTML5 Canvas库. 官网地址:http://fabricjs.com/ 为什么要使用Fabric.js ...
HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...
html5 canvas雨点打到窗玻璃动画
html5 canvas雨点打到窗玻璃动画 HTML5下雨效果效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: 1 <!doctype h ...

canvas火焰动画、管线流动动画-Fabric.js

官网

效果

代码

canvas火焰动画、管线流动动画-Fabric.js相关推荐

最新文章

热门文章