• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5 canvas fillRect坐标和大小的问题解决方法
    fillRect(100,100,100,100) 前2个100是指坐标，后2个100是指宽和高。

    今天学习html5 的canvas，发现fillRect的坐标和大小一直不对，研究了半天，发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。

    错误的方式1:

    复制代码
    代码如下:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #mycanvas{
    width: 200px;
    height: 200px;
    background: yellow;
    }
    </style>
    </head>
    <body>
    <canvas id='mycanvas' ></canvas>
    <script>
    var c = document.getElementById('mycanvas');
    var ctx = c.getContext("2d");
    ctx.fillStyle='#f36';
    ctx.fillRect(100, 100, 100, 100);
    </script>
    </body>
    </html>

    错误的方式2：

    复制代码
    代码如下:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <canvas id='mycanvas' style='width:200px;height:200px;background:yellow'></canvas>
    <script>
    var c = document.getElementById('mycanvas');
    var ctx = c.getContext("2d");
    ctx.fillStyle='#f36';
    ctx.fillRect(100, 100, 100, 100);
    </script>
    </body>
    </html>

    显示结果：

    正确的方式：

    复制代码
    代码如下:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <canvas id='mycanvas' width='200px' height='200px' style='background:yellow'></canvas>
    <script>
    var c = document.getElementById('mycanvas');
    var ctx = c.getContext("2d");
    ctx.fillStyle='#f36';
    ctx.fillRect(100, 100, 100, 100);
    </script>
    </body>
    </html>
    上一篇：html5适合移动应用开发的12大特性
    下一篇：html5实现微信打飞机游戏
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5 canvas fillRect坐标和大小的问题解决方法 html5,canvas,fillRect,坐标,和,