[英]HTML5 Canvas + JS Not Working on IOS/Safari
I've implemented a canvas element with a javascript particle effect. 我已经实现了一个带有javascript粒子效果的canvas元素。 The effect is working on every browser but IOS/Safari.
效果适用于每个浏览器,但IOS / Safari。 I've done a bit of research and IOS/Safari supports HTML5/Canvas: According to Browser Support Charts for HTML5/Canvas
我做了一些研究,IOS / Safari支持HTML5 / Canvas: 根据 HTML5 / Canvas的浏览器支持图表
$(function() { var WIDTH = window.innerWidth * .9, HEIGHT = window.innerHeight, MAX_PARTICLES = 100, DRAW_INTERVAL = 60, canvas = document.querySelector('#pixies'), context = canvas.getContext('2d'), gradient = null, pixies = new Array(); function setDimensions() { WIDTH = window.outerWidth; HEIGHT = window.innerHeight; canvas.width = WIDTH; canvas.height = HEIGHT; } setDimensions(); window.addEventListener('resize', setDimensions); function Circle() { this.settings = {ttl:8000, xmax:5, ymax:2, rmax:10, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true}; this.reset = function() { this.x = (this.settings.random ? WIDTH*Math.random() : this.settings.xdef); this.y = (this.settings.random ? HEIGHT*Math.random() : this.settings.ydef); this.r = ((this.settings.rmax-1)*Math.random()) + 1; this.dx = (Math.random()*this.settings.xmax) * (Math.random() < .5 ? -1 : 1); this.dy = (Math.random()*this.settings.ymax) * (Math.random() < .5 ? -1 : 1); this.hl = (this.settings.ttl/DRAW_INTERVAL)*(this.r/this.settings.rmax); this.rt = Math.random()*this.hl; this.settings.rt = Math.random()+1; this.stop = Math.random()*.2+.4; this.settings.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1); this.settings.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1); } this.fade = function() { this.rt += this.settings.rt; } this.draw = function() { if(this.settings.blink && (this.rt <= 0 || this.rt >= this.hl)) { this.settings.rt = this.settings.rt*-1; } else if(this.rt >= this.hl) { this.reset(); } var newo = 1-(this.rt/this.hl); context.beginPath(); context.arc(this.x, this.y, this.r, 0, Math.PI*2, true); context.closePath(); var cr = this.r*newo; gradient = context.createRadialGradient(this.x, this.y, 0, this.x, this.y, (cr <= 0 ? 1 : cr)); gradient.addColorStop(0.0, 'rgba(255,255,255,'+newo+')'); gradient.addColorStop(this.stop, 'rgba(255,255,255,'+(newo*.6)+')'); gradient.addColorStop(1.0, 'rgba(255,255,255,0)'); context.fillStyle = gradient; context.fill(); } this.move = function() { this.x += (this.rt/this.hl)*this.dx; this.y += (this.rt/this.hl)*this.dy; if(this.x > WIDTH || this.x < 0) this.dx *= -1; if(this.y > HEIGHT || this.y < 0) this.dy *= -1; } this.getX = function() { return this.x; } this.getY = function() { return this.y; } } for (var i = 0; i < MAX_PARTICLES; i++) { pixies.push(new Circle()); pixies[i].reset(); } function draw() { context.clearRect(0, 0, WIDTH, HEIGHT); for(var i = 0; i < pixies.length; i++) { pixies[i].fade(); pixies[i].move(); pixies[i].draw(); } } setInterval(draw, DRAW_INTERVAL); });
#particles { position: absolute; background: navy; width: 200px; height: 200px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="particles"> <canvas id="pixies"></canvas> </div>
Any ideas why this isn't working in IOS/Safari? 任何想法为什么这不适用于IOS / Safari? The actual site in question is this one: www.pjmaskslive.com
有问题的实际网站是: www.pjmaskslive.com
The issue appears to be that the canvas elements width is set 0 on the aforementioned website . 问题似乎是在上述网站上将canvas元素宽度设置为0。 So I would assume that the issue is setting the
WIDTH
variable at the start. 所以我认为问题是在开始时设置
WIDTH
变量。 This might be due to an ongoing bug with iOS 10 as mentioned in this question. 这可能是由于此问题中提到的iOS 10的持续错误。
An alternative approach might be to use document.body.getBoundingClientRect().width
as an alternative to window.innerWidth
and/or window.outerWidth
. 另一种方法可能是使用
document.body.getBoundingClientRect().width
作为window.innerWidth
和/或window.outerWidth
的替代方法。 screen.width
could also be used, however, these could also have the same issues as your previous methods. 也可以使用
screen.width
,但是,这些问题也可能与以前的方法有相同的问题。
Seems like a safari issue rather than your code either way! 看起来像野生动物园问题,而不是你的代码!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.