canvas合并多张图片为长图片示例代码
代码语言:html
所属分类:其他
代码描述:canvas合并多张图片为长图片示例代码场出场动画效果代码
代码标签: canvas 合并 多张 图片 长 图片 示例 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> </head> <body> <script type="text/javascript"> // 准备图片的URL var imageUrl1 = '//repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png'; var imageUrl2 = '//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png'; // 创建Canvas元素 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创建一个Promise用于加载图片 function loadImage(url) { return new Promise(function(resolve, reject) { var img = new Image(); img.crossOrigin = 'Anonymous'; // 设置跨域属性 img.onload = function() { resolve(img); }; img.src = url; }); } // 加载图片并绘制到Canvas上 Promise.all([loadImage(imageUrl1), loadImage(imageUrl2)]) .then(fun.........完整代码请登录后点击上方下载按钮下载查看
网友评论0