javascript - canvas画多个小球,怎么使每一个小球的背景图片不一样,可以做到么?
大家讲道理
大家讲道理 2017-06-14 10:54:28
[JavaScript讨论组]

问题:canvas画多个小球,怎么使每一个小球的背景图片不一样,可以做到么?
现在做到的只是每个小球不同的颜色,我想用图片填充。

部分代码:

`cxt.fillStyle = ballArray[i].color;
// var pat=cxt.createPattern(img,"no-repeat");
// cxt.fillStyle = pat;
cxt.arc(ballArray[i].x, ballArray[i].y, ballArray[i].r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();`

当前效果:

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(4)
高洛峰

你把img标签里的链接改下,然后把代码复制粘贴到你本地测试。不过说实话,用背景平铺来实现画图很不好控制。
我给你另外一个建议就是先用drawImage画好,然后通过globalCompositeOperation来截取圆形。

<img src="AN_1.png"><br/>
<canvas id="canvas" width="300" height="300" style="background:#000;"></canvas>
<script type="text/javascript">
var cv = document.getElementById('canvas'),
    cxt = cv.getContext('2d'),
    img = document.querySelector("img");

var pt = cxt.createPattern(img,"repeat");
cxt.fillStyle = pt;

cxt.save();
cxt.arc(canvas.width/2,canvas.height/2,100,0,Math.PI * 2, true);
cxt.fill();
cxt.restore();
</script>
代言
grd.addColorStop(0,"#eee");
grd.addColorStop(1,ballArray[i].color);
cxt.fillStyle=grd;
cxt.arc(ballArray[i].x, ballArray[i].y, ballArray[i].r, 0, Math.PI * 2, true);

这样写成渐变了...效果差不多了,虽然很丑。。

更新...

黄舟

渐变 随机颜色 随机 透明度

女神的闺蜜爱上我

感觉你那个注释掉的代码不就是吗

// var pat=cxt.createPattern(img,"no-repeat");
// cxt.fillStyle = pat;

这是我写的demo,不过没测兼容性

https://codepen.io/jackpan/pe...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号