请教canvas.element.style =""，在IE内核中失效？

sjwwap 2017-03-08 05:30:02

这是谷歌浏览器，样式被正常加进去了。

这是ie11，没有效果，怎么回事？

下面是代码：

HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Particles</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var config = {
vx: 4,
vy: 4,
height: 2,
width: 2,
count: 100,
color: "0, 0, 0",
stroke: "0,0,0",
dist: 6000,
e_dist: 20000,
max_conn: 10
}
CanvasParticle(config);
}
</script>

<div style="width: 100%; height: 500px; background: #696; position: relative;"></div>
<script type="text/javascript" src="canvas-particle.js"></script>
</body>
</html>

JS：（标记为红色了）

var CanvasParticle = (function(){
function getElementByTag(name){
return document.getElementsByTagName(name);
}
function getELementById(id){
return document.getElementById(id);
}
// 根据传入的config初始化画布
function canvasInit(canvasConfig){
canvasConfig = canvasConfig || {};
var html = getElementByTag("html")[0];
var body = getElementByTag("body")[0];
var canvasDiv = getELementById("canvas-particle");
var canvasObj = document.createElement("canvas");

var canvas = {
element: canvasObj,
points : [],
// 默认配置
config: {
vx: canvasConfig.vx || 4,
vy: canvasConfig.vy || 4,
height: canvasConfig.height || 2,
width: canvasConfig.width || 2,
count: canvasConfig.count || 100,
color: canvasConfig.color || "255, 255, 255",
stroke: canvasConfig.stroke || "255,255,255",
dist: canvasConfig.dist || 6000,
e_dist: canvasConfig.e_dist || 20000,
max_conn: 10
}
};

// 获取context
if(canvas.element.getContext("2d")){
canvas.context = canvas.element.getContext("2d");
}else{
return null;
}

body.style.padding = "0";
body.style.margin = "0";
// body.replaceChild(canvas.element, canvasDiv);
body.appendChild(canvas.element);
canvas.element.style = "position: absolute; top: 0; left: 0; z-index: 98;opacity: 0.4;";
if(document.body.scrollWidth < 768){
canvas.element.style = "position: absolute; top: 0; left: 0; z-index: 98;opacity:0.1;";
}

canvasSize(canvas.element);
window.onresize = function(){
canvasSize(canvas.element);
}
body.onmousemove = function(e){
var event = e || window.event;
canvas.mouse = {
x: event.clientX,
y: event.clientY
}
}
document.onmouseleave = function(){
canvas.mouse = undefined;
}
setInterval(function(){
drawPoint(canvas);
}, 40);
}

// 设置canvas大小
function canvasSize(canvas){
canvas.width = window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = 720;
if(document.body.scrollWidth < 768){
canvas.height = window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight;
}
}

// 画点
function drawPoint(canvas){
var context = canvas.context,
point,
dist;
context.clearRect(0, 0, canvas.element.width, canvas.element.height);
context.beginPath();
context.fillStyle = "rgb("+ canvas.config.color +")";
for(var i = 0, len = canvas.config.count; i < len; i++){
if(canvas.points.length != canvas.config.count){
// 初始化所有点
point = {
x: Math.floor(Math.random() * canvas.element.width),
y: Math.floor(Math.random() * canvas.element.height),
vx: canvas.config.vx / 2 - Math.random() * canvas.config.vx,
vy: canvas.config.vy / 2 - Math.random() * canvas.config.vy
}
}else{
// 处理球的速度和位置，并且做边界处理
point = borderPoint(canvas.points[i], canvas);
}
context.fillRect(point.x - canvas.config.width / 2, point.y - canvas.config.height / 2, canvas.config.width, canvas.config.height);

canvas.points[i] = point;
}
drawLine(context, canvas, canvas.mouse);
context.closePath();
}

// 边界处理
function borderPoint(point, canvas){
var p = point;
if(point.x <= 0 || point.x >= canvas.element.width){
p.vx = -p.vx;
p.x += p.vx;
}else if(point.y <= 0 || point.y >= canvas.element.height){
p.vy = -p.vy;
p.y += p.vy;
}else{
p = {
x: p.x + p.vx,
y: p.y + p.vy,
vx: p.vx,
vy: p.vy
}
}
return p;
}

// 画线
function drawLine(context, canvas, mouse){
context = context || canvas.context;
for(var i = 0, len = canvas.config.count; i < len; i++){
// 初始化最大连接数
canvas.points[i].max_conn = 0;
// point to point
for(var j = 0; j < len; j++){
if(i != j){
dist = Math.round(canvas.points[i].x - canvas.points[j].x) * Math.round(canvas.points[i].x - canvas.points[j].x) +
Math.round(canvas.points[i].y - canvas.points[j].y) * Math.round(canvas.points[i].y - canvas.points[j].y);
// 两点距离小于吸附距离，而且小于最大连接数，则画线
if(dist <= canvas.config.dist && canvas.points[i].max_conn <canvas.config.max_conn){
canvas.points[i].max_conn++;
// 距离越远，线条越细，而且越透明
context.lineWidth = 0.5 - dist / canvas.config.dist;
context.strokeStyle = "rgba("+ canvas.config.stroke + ","+ (1 - dist / canvas.config.dist) +")"
context.beginPath();
context.moveTo(canvas.points[i].x, canvas.points[i].y);
context.lineTo(canvas.points[j].x, canvas.points[j].y);
context.stroke();

}
}
}
// 如果鼠标进入画布
// point to mouse
if(mouse){
dist = Math.round(canvas.points[i].x - mouse.x) * Math.round(canvas.points[i].x - mouse.x) +
Math.round(canvas.points[i].y - mouse.y) * Math.round(canvas.points[i].y - mouse.y);
// 遇到鼠标吸附距离时加速，直接改变point的x，y值达到加速效果
if(dist > canvas.config.dist && dist <= canvas.config.e_dist){
canvas.points[i].x = canvas.points[i].x + (mouse.x - canvas.points[i].x) / 20;
canvas.points[i].y = canvas.points[i].y + (mouse.y - canvas.points[i].y) / 20;
}
if(dist <= canvas.config.e_dist){
context.lineWidth = 1;
context.strokeStyle = "rgba("+ canvas.config.stroke + ","+ (1 - dist / canvas.config.e_dist) +")";
context.beginPath();
context.moveTo(canvas.points[i].x, canvas.points[i].y);
context.lineTo(mouse.x, mouse.y);
context.stroke();
}
}
}
}
return canvasInit;
})();

...全文

103 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

sjwwap 2017-03-08

打赏
举报

已解决，谢谢啦！！

天际的海浪 2017-03-08

打赏
举报

你那样设置不标准，要这样


canvas.element.style.position = "absolute";
canvas.element.style.top = "0px";
canvas.element.style.left = "0px";
canvas.element.style.zIndex = 98;
canvas.element.style.opacity = 0.4;

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?............ 17 2、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？. 17 3、Quirks模式是什么？它和Standa

web app遇到的一些坑及小...原因：手机端事件 touchstart --\> touchmove --> touchend or touchcancel --> click，因为在touch事件触发之后，浏览器要判断用户是否会做出双击屏幕的操作，所以会等待300ms来

cookie：存储的数据量比较小，4kb左右，在与服务器通信时，携带在http请求头中，可以在同源的页面之间共享，有失效日期。 sessionStorage：只在当前会话窗口有效，窗口关闭sessionStorage清除，保存在客户端不与...

1. 常用那几种浏览器测试？有哪些内核(Layout Engine)? (Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。 (Q2)内核：Trident，Gecko，Presto，Webkit...(Q1)行内元素：会在水平方向排列，不能包含块级元素，设置widt

171、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?............ 172、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？. 173、Quirks模式是什么？它和Standards模式...