好一只闲云野鹤~
2020-08-13 22:44
采纳率: 50%
浏览 146

改的一个网页设计运行显示canvas is null

本人
网页小白看到了一个生成动态粒子的例子,本想下载下来改一改自己用,结果一在firefox上运行就显示minify.js文件里画布为空?f12看别人的例子发现代码一样,想问问怎么改?
图片说明

html文件:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HAPPY BIRTHDAY</title>
    <style>
    html,body{width:100%;height:100%;padding:0;margin:0;overflow:hidden;background:rgba(255,247,240,1);}
    #mycanvas{width:100vw; height:100vh;}
    </style>
    <script src="action.js"></script>
</head>
<body>
    <canvas id="#myconvas" width="100vw" height="100vh"></canvas>
    <img id="tulip" src="./heart.png" alt="heart">
    <script  src="minify.js"></script>
</body>
</html>


minify.js文件:

const FOCUS_POSITION=1200,SPRING=.01,FRICTION=.9;
        class PARTICLE{
            constructor(t){
                this.center=t,
                this.x=0,
                this.y=0,
                this.z=0,
                this.vx=0,
                this.vy=0,
                this.vz=0,
                this.nextX=0,
                this.nextY=0,
                this.nextZ=0
            }
            setAxis(t){
                this.nextX=t.x,
                this.nextY=t.y,
                this.nextZ=t.z,
                this.color=t.color
            }
            rotateX(t){
                const i=Math.sin(t),
                e=Math.cos(t),
                s=this.nextY*e-this.nextZ*i,
                h=this.nextZ*e+this.nextY*i,
                n=this.y*e-this.z*i,
                a=this.z*e+this.y*i;
                this.nextY=s,
                this.nextZ=h,
                this.y=n,
                this.z=a
            }
            rotateY(t){
                const i=Math.sin(t),
                e=Math.cos(t),
                s=this.nextX*e-this.nextZ*i,
                h=this.nextZ*e+this.nextX*i,
                n=this.x*e-this.z*i,
                a=this.z*e+this.x*i;
                this.nextX=s,
                this.nextZ=h,
                this.x=n,
                this.z=a
            }
            rotateZ(t){
                const i=Math.sin(t),
                e=Math.cos(t),
                s=this.nextX*e-this.nextY*i,
                h=this.nextY*e+this.nextX*i,
                n=this.x*e-this.y*i,
                a=this.y*e+this.x*i;
                this.nextX=s,
                this.nextY=h,
                this.x=n,
                this.y=a
            }
            step(){
                this.vx+=(this.nextX-this.x)*SPRING,
                this.vy+=(this.nextY-this.y)*SPRING,
                this.vz+=(this.nextZ-this.z)*SPRING,
                this.vx*=FRICTION,
                this.vy*=FRICTION,
                this.vz*=FRICTION,
                this.x+=this.vx,
                this.y+=this.vy,
                this.z+=this.vz
            }
            getAxis2D(){
                this.step();
                const t=FOCUS_POSITION/(FOCUS_POSITION+this.z);
                return{
                    x:this.center.x+this.x*t,
                    y:this.center.y-this.y*t
                }
            }
        }
        const lineHeight=7;
        let praticle_count=1e3;
        function getRequestParam(t){
            const i=t||window.location.search,e={};
            if(-1!==i.indexOf("?")){
                const t=i.substr(1).split("&");
                for(let i=0;i<t.length;i+=1)e[t[i].split("=")[0]]=t[i].split("=")[1]
            }return e
        }
        function color(t){return`hsla(${t.h},${t.s},${t.l},${t.a})`}
        const ArcCanvas={};
        function createArcCanvas(t){
            const i=document.createElement("#canvas"),
            e=i.getContext("2d");
            i.setAttribute("width",40),
            i.setAttribute("height",40),
            e.fillStyle=t,
            e.arc(20,20,20,0,2*Math.PI),
            e.fill(),
            ArcCanvas[t]=i
        }
        class Scene{
            constructor(t,i,e){
                this.ctx=t,this.draw=this.draw.bind(this),this.init(i,e)
            }
            init(t,i){
                this.width=t,
                this.height=i,
                this.center={x:t/2,y:i/2},
                this.geometrys=[],
                this.activeGeometry=null,
                this.tick=0,
                this.actionIndex=-1,
                this.particles=[];
                for(let t=0;t<praticle_count;t++)this.particles.push(new PARTICLE(this.center));
                this.clear(),cancelAnimationFrame(this.raf)
            }
            clear(){
                this.ctx.fillStyle="rgba(255, 247, 240,0.3)",this.ctx.fillRect(0,0,this.width,this.height)
            }
            build(t){
                this.actions=t,
                this.geometrys=this.actions.map(t=>t.func?t.func:this.buildGeometry(t.texts)),
                this.geometrys.length&&this.nextAction()
            }
            buildGeometry(t){
                const i=[];let e="";
                t.forEach(t=>{e+=t.text});
                const s=[+!+[]+!+[]]+[+[]]+[+[]]|0,
                h=~~(s*this.height/this.width),
                n=document.createElement("canvas"),
                a=n.getContext("2d");
                n.setAttribute("width",s),
                n.setAttribute("height",h),
                a.fillStyle="#000",
                a.font="bold 10px Arial";
                const c=a.measureText(e),
                r=Math.min(.8*h*10/lineHeight,.8*s*10/c.width);
                a.font=`bold ${r}px Arial`;
                const o=a.measureText(e);
                let x=(s-o.width)/2;
                const l=(h+r/10*lineHeight)/2;
                return Object.values(t).forEach(t=>{
                    a.clearRect(0,0,s,h),a.fillText(t.text,x,l),
                    x+=a.measureText(t.text).width;
                    const e=a.getImageData(0,0,s,h),n=[];
                    for(let t=0,i=e.width*e.height;t<i;t++)e.data[4*t+3]&&n.push({x:t%e.width/e.width,y:t/e.width/e.height});
                    i.push({color:t.hsla,points:n})
                }),i
            }
            nextAction(){
                this.actionIndex++,
                this.actionIndex>=this.actions.length&&(this.actionIndex=0),
                this.activeGeometry=this.geometrys[this.actionIndex],
                this.tick=0,this.setParticle()
            }
            setParticle(){
                if("function"==typeof this.activeGeometry)this.particles.forEach(t=>{t.setAxis(this.activeGeometry(this.width,this.height))});
                else{const t=this.activeGeometry.length;
                    this.particles.forEach((i,e)=>{
                        let s=this.activeGeometry[e%t],
                        h=s.points[~~(Math.random()*s.points.length)];
                        i.setAxis({x:h.x*canvasWidth-this.center.x,y:(1-h.y)*canvasHeight-this.center.y,z:~~(30*Math.random()),color:s.color})
                    })
                }
            }
            renderParticles(){
                this.particles.forEach(t=>{
                    const i=t.getAxis2D();
                    if(this.ctx.beginPath(),"1"===getRequestParam().img)this.ctx.drawImage(HeartCanvas,i.x-15,i.y-15,30,30);
                    else{const e=color(t.color);ArcCanvas[e]||createArcCanvas(e),this.ctx.drawImage(ArcCanvas[e],i.x-2,i.y-2,4,4)}
                })
            }
            draw(){
                this.tick++,
                this.tick>=this.actions[this.actionIndex].lifeTime&&this.nextAction(),
                this.clear(),
                this.renderParticles(),
                this.raf=requestAnimationFrame(this.draw)
            }
        }
        var canvas,ctx,canvasWidth,canvasHeight,scene,img,HeartCanvas;
        function load(){canvas=document.querySelector("#mycanvas"),ctx=canvas.getContext("2d"),createHeartCanvas(),reset(),(scene=new Scene(ctx,canvasWidth,canvasHeight)).build(Actions),scene.draw()}function createHeartCanvas(){HeartCanvas=document.getElementById("tulip")}function reset(){canvasWidth=window.innerWidth,canvasHeight=window.innerHeight;const t=window.devicePixelRatio||1;canvas.width=canvasWidth*t,canvas.height=canvasHeight*t,ctx.scale(t,t),scene&&scene.init(canvasWidth,canvasHeight),scene&&scene.build(Actions),scene&&scene.draw()}window.addEventListener("load",load),window.addEventListener("resize",reset);


action.js文件:

// lifeTime 祯数
        const color1 = {
        h: 279,
        s: '100%',
        l: '50%',
        a: '80%'
        };
        const color2 = {
        h: 197,
        s: '100%',
        l: '50%',
        a: '80%'
        };
        const color3 = {
        h: 0,
        s: '100%',
        l: '50%',
        a: '80%'
        };
        const points1 = [];
        const points2 = [];
        const Actions = [{
            lifeTime: 60,
            texts: [{
            text: '3',
            hsla: color1
            }]
        },
        {
            lifeTime: 90,
            func: (width, height) => {
                if(!points1.length){
                    for(let i=0;i<1200;i++){
                    let x = (i - 1200 / 2) / 300;
                    let y = Math.sqrt(Math.abs(x)) - Math.sqrt(Math.cos(x)) * Math.cos(30 * x);
                    if(!isNaN(y)){
                        points1.push({x,y})
                    }
                    }
                }

                const p = points1[~~(Math.random() * points1.length)]
                const radius = Math.min(width * 0.4, height * 0.4);
                return {
                    x: p.x * radius / 2,
                    y: p.y * radius / 2,
                    z: ~~(Math.random() * 30),
                    color: {
                        h: 0,
                        s: '100%',
                        l: '70%',
                        a: '80%'
                    }
                };
            }
        },
        {
            lifeTime: 60,
            texts: [{
            text: '2',
            hsla: color1
            }]
        },
        {
            lifeTime: 90,
            func: (width, height) => {
                if(!points2.length){
                    const img = document.getElementById("tulip");
                    const offscreenCanvas = document.createElement('canvas');
                    const offscreenCanvasCtx = offscreenCanvas.getContext('2d');
                    const imgWidth = 200;
                    const imgHeight = 200;
                    offscreenCanvas.setAttribute('width', imgWidth);
                    offscreenCanvas.setAttribute('height', imgHeight);
                    offscreenCanvasCtx.drawImage(img, 0, 0, imgWidth, imgHeight);
                    let imgData = offscreenCanvasCtx.getImageData(0, 0, imgWidth, imgHeight);
                    for (let i = 0, max = imgData.width * imgData.height; i < max; i++) {
                        if (imgData.data[i * 4 + 3]) {
                            points2.push({
                                x: (i % imgData.width) / imgData.width,
                                y: (i / imgData.width) / imgData.height
                            });
                        }
                    }
                }
                const p = points2[~~(Math.random() * points2.length)]
                const radius = Math.min(width * 0.8, height * 0.8);
                return {
                    x: p.x * radius - radius / 2,
                    y: (1 - p.y) * radius - radius / 2,
                    z: ~~(Math.random() * 30),
                    color: {
                        h: 0,
                        s: '100%',
                        l: '60%',
                        a: '80%'
                    }
                };
            }
        },
        {
            lifeTime: 60,
            texts: [{
                text: '1',
                hsla: color1
            }]
        },
        {
            lifeTime: 180,
            texts: [{
                text: 'I',
                hsla: color2
            },
            {
                text: ' ❤️ ',
                hsla: color3
            },
            {
                text: 'Y',
                hsla: color2
            },
            {
                text: 'O',
                hsla: color2
            },
            {
                text: 'U',
                hsla: color2
            },
            ]
        },
        ]
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • jingluan666 2020-08-14 08:16
    已采纳

    html里面的canvas的id="#myconvas"不对,应该是id="mycanvas"
    id前面不该加#(#表示查找时用id),另外myconvas拼写错误

    错误是从minify.js中看出来的,f12点击异常链接定位到文件,再点击左下角的大括号图标格式化就可以看到具体信息
    图片说明

    点赞 3 打赏 评论
  • 点赞 打赏 评论

相关推荐 更多相似问题