初识canvas出现的问题

最新推荐文章于 2022-08-18 18:59:29 发布

Kratial

最新推荐文章于 2022-08-18 18:59:29 发布

阅读量422

点赞数 1

本文链接：https://blog.csdn.net/Kratial/article/details/80652983

版权

1.由于canvas能够绘制好多漂亮的东西，今天接触了一下，我发现了一个问题
就是写canvas标签时，必须把canvas对应的宽和高都写在标签里面，否则就得不到我们预期的效果
2.这是我今天在练习的时候的实例：
（1）第一种情况（没有达到预期的标准）：

 <html>
<head>
    <meta charset="utf-8">
    <title>了解神奇的canvas</title>
    <style type="text/css">
    html,body
    {margin:0px;
        padding:0px;
    }
    #canvas
    {background:orange;
        width:1000px;
        height:1000px;
        }
    </style>
</head>
<body>
   **<canvas id="canvas" ></canvas>**
   <script type="text/javascript">
    //获取canvas对象
    var canvas=document.getElementById("canvas");
    //创建context对象
    var ctx=canvas.getContext("2d");
    //图形绘制

        for(var i=0;i<10;i++)
        {
            ctx.beginPath();//表示要开始绘制新路径
            //开始绘制纵轴
            ctx.moveTo(60+60*i,100);
            ctx.lineTo(60+60*i,640);
            ctx.closePath();
            ctx.stroke();

            //开始绘制横轴
            ctx.beginPath();
            ctx.moveTo(60,100+i*60);
            ctx.lineTo(600,100+i*60);
            ctx.closePath();
            ctx.stroke();
        }
   </script>
</body>

运行结果：
此结果没有达到预期b标准
（2）第二种情况（达到预期）：

<html>
<head>
    <meta charset="utf-8">
    <title>了解神奇的canvas</title>
    <style type="text/css">
    html,body
    {margin:0px;
        padding:0px;
    }
    #canvas
    {background:orange;
    }
    </style>
</head>
<body>
   **<canvas id="canvas" width="1000px" height="1000px"></canvas>**

   <script type="text/javascript">
    //获取canvas对象
    var canvas=document.getElementById("canvas");
    //创建context对象
    var ctx=canvas.getContext("2d");
    //图形绘制

        for(var i=0;i<10;i++)
        {
            ctx.beginPath();//表示要开始绘制新路径
            //开始绘制纵轴
            ctx.moveTo(60+60*i,100);
            ctx.lineTo(60+60*i,640);
            ctx.closePath();
            ctx.stroke();

            //开始绘制横轴
            ctx.beginPath();
            ctx.moveTo(60,100+i*60);
            ctx.lineTo(600,100+i*60);
            ctx.closePath();
            ctx.stroke();
        }
   </script>
</body>
</html>

运行结果：
这里写图片描述

Kratial

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识canvas出现的问题

1.由于canvas能够绘制好多漂亮的东西，今天接触了一下，我发现了一个问题就是写canvas标签时，必须把canvas对应的宽和高都写在标签里面，否则就得不到我们预期的效果 2.这是我今天在练习的时候的实例：（1）第一种情况（没有达到预期的标准）： &lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &...
复制链接

扫一扫