canvas绘制心形动态图片

最新推荐文章于 2024-07-27 21:40:29 发布

城南已开979

最新推荐文章于 2024-07-27 21:40:29 发布

阅读量219

点赞数 3

文章标签：信息可视化

本文链接：https://blog.csdn.net/weixin_66948502/article/details/136447711

版权

本文介绍了如何使用JavaScript结合HTML5CanvasAPI绘制动态心形图形，并讨论了如何处理图片的正向显示问题，包括通过数学公式计算坐标和调整图片旋转角度。

摘要由CSDN通过智能技术生成

用javaScript结合canvas用图片绘制动态心形
心形数学公式：
x=16(sint)3 （3为3次幂）
y=13cost- 5cos2t-2cos3t-cos4t
（t为x轴与y轴的角度）
注意：该公式绘制的的心形是倒着的，需要将y轴坐标取反，即可得到正着的心形。
同理，心形里插入的图片也是倒着的，简单的方法是可以先将图片提前旋转180度后导入到文件，使用时刚好再反过来为正常的。

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas_render_heart</title>
    <style>
    </style>
</head>
<body>
    <canvas id="heart"></canvas>
</body>
</html>
<script>
    if(!document.createElement("canvas").getContext){
        var msg= document.createElement( "div");
        msg.innerHTML="可以使用canvas";
        document. body.append(msg);
        //console.log("dont't use canvas");
    }else{
        //console.log("can use canvas");

        var canvas=document.getElementById("heart");
        canvas.width=600;
        canvas.height=600;
        canvas.style.width=canvas.width+"px";
        canvas.style.height=canvas.height+"px";

        var context=canvas.getContext("2d");
        context.translate(canvas.width/2,canvas.height/2);//将坐标系移动到canvas的中心
        context.scale(1,-1);
        context.moveTo(0,0);
        var imgs=[];
        for(j=1;j<=5;j++){
            var img=new Image(50,50);
            img.src="./imgs/"+j+".jpg"; 
            //img.src=`./imgs/${j}.jpg`;
            imgs.push(img);
        }
        var i=0; //半径与x轴的夹角
        var t=0; //通过t 绘制不同的圆
        var ticket=setInterval(function(){
            render();
        },80);
        function render(){
            i=i+0.2;
            if(t>=5){
                t=0;
            }
            var r=14;//控制心形大小
            var x=r*16*Math.sin(i)*Math.sin(i)*Math.sin(i);
            var y=r*(13*Math.cos(i)-5*Math.cos(2*i)-2*Math.cos(3*i)-Math.cos(4*i));

            context.drawImage(imgs[t],x,y,imgs[t].width,imgs[t].height);
            //context.scale(1,-1);
            t=t+1;
            //console.log(i);
            if(i>6){
                clearInterval(ticket);
            }
        }
    }
</script>