Canvas图片下落

先上图片效果：

这里是代码，支持动态修改图片，通过选择文件更图片链接形式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>let c=null;let ctx;let star=[];let image;function createStar(){for(let i=0;i<200;i++){star.push({x:Math.floor(Math.random()*1200-200),y: Math.floor(Math.random()*1200-200),})}}function starS(p){ctx.beginPath();ctx.drawImage(image,p.x,p.y);}function starMove(){for(let i=0;i<star.length;i++){star[i].y+=3;if(star[i].y>1000){star[i].y=-200;star[i].x=Math.floor(Math.random()*1200-200);}starS(star[i])
/*        ctx.beginPath();ctx.arc(star[i].x,star[i].y,3,0,Math.PI*2);ctx.fill();ctx.closePath();*/}}function drawStar(){}window.onload=()=>{c=document.getElementById('c');ctx=c.getContext('2d');ctx.fillStyle="rgba(88,209,255,0.65)"createStar();image=new Image();image.src='水母3.png';image.crossOrigin = "*";setInterval(()=>{ctx.clearRect(0,0,c.width,c.height);starMove();},10)}function SrcIn(e){image=new Image();image.src=e.target.value+'?v=' + Math.random();image.crossOrigin = "*";}function fileIn(e){let file = e.target.files[0];image=new Image();image.src=URL.createObjectURL(file);image.crossOrigin = "*";}</script>
</head>
<body>
<canvas width="1000" height="1000" id="c" style="background-color: black;border:1px solid black;"></canvas>
<span>图片网址：</span>
<input   onchange="SrcIn(event)"/>
<span>文件网址：</span><input type="file" accept="image/*" onchange="fileIn(event)"/>
</body>
</html>

Canvas图片下落相关推荐

HTML5开发笔记：初窥CANVAS，上传canvas图片到服务器
本文向您展示怎样转换Image为canvas,以及canvas如何提取出一个Image. 转换 Image为 Canvas 要把图片转换为Canvas(画板,画布),可以使用canvas元素 con ...
canvas 实现图片局部模糊_HTML5 Canvas图片马赛克模糊动画
本文作者html5tricks,转载请注明出处经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用 HTML代码如下 Change pixel resolution 32 定义了一 ...
uniapp canvas 图片加上文字合成一张新图并保存到手机相册
uniapp canvas 图片加上文字合成一张新图并保存到手机相册背景图上是奖章徽章,中间加上自定义文本,我这个图是因为背景图上原来就有字,随便找的,所以跟我写的文字层叠了具体实现代码 < ...
uni保存canvas图片_UniApp 用canvas生成图片保存本地
第一步:先定义一个canvas标签,如下. 第二步:获取图片在view中的高度和宽度,uni获取高度和宽度的方法,如下. let view = uni.createSelectorQuery().in ...
几个用于前端canvas图片查看编辑的js插件
几个用于前端canvas图片查看编辑的js插件 1 tui.image-editor 2 Konva 3 AlloyImage 4 zwibbler 5 canvasPS 6 Photo Editor ...
canvas图片合成海报
canvas图片合成海报 //创建一共hb.js代码如下 var sthb = {//参数说明:info是一个对象里面主要传入的是绘制图片的宽高和图片的src还有我们生成的二维码图片的宽高位置init ...
前端常见问题——Canvas 图片跨域
尽管不通过 CORS 就可以在 Canvas 画布中使用图片,但是这会污染画布.一旦画布被污染,你就无法读取其数据.例如,你不能再使用画布的 toBlob(), toDataURL() 或 getIm ...
HTML5 Canvas 开发绘图方法整理【七、canvas 图片切割、自定义文字、字体背景】
Canvas 图片切割语法: ctx.clip(); 从画布中剪切任意形状和尺寸. 需要注意的是: 剪切之后,除设定Canvas "状态" 外, 一般都会在裁剪后的图形里绘制. ...
HTML5 Canvas图片马赛克模糊动画
经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用HTML5 Canvas技术来实现图片的马赛克模糊效果.在演示中我们可以拖动滑竿来设置马赛克模糊的程度,你可以在不同的值下观察图片 ...

Canvas图片下落

Canvas图片下落相关推荐

最新文章

热门文章