• 技术文章 >web前端 >js教程

    如何在javascript中绘制方块

    藏色散人藏色散人2021-04-08 14:57:33原创108

    在javascript中绘制方块的方法:首先创建一个HTML示例文件;然后在body中添加canvas标签;接着在head中添加script标签,用于输入javascript代码;最后通过draw方法绘制方块即可。

    本文操作环境:windows7系统、javascript1.8.5&&html5版、Dell G3电脑。

    html中插入javascript画矩形

    <!DOCTYPE <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>canvas元素示例</title>
    <script>
    function draw(id)
    {
    var canvas = document.getElementById(id);
    if(canvas == null)
    return false;
    var context = canvas.getContext('2d');
    context.fillStyle = "#eeefff";
    context.fillRect(0,0,400,300);
    context.fillStyle = "green";
    context.strokeStyle = "red";
    context.lineWidth = 1;
    context.fillRect(50,50,100,100);
    context.strokeRect(50,50,100,100);
    }
    </script>
    </head>
    <body οnlοad="draw('canvas');">
    <h1>canvas中画矩形</h1>
    <canvas id="canvas" width="400" height="300"/>
    </body>
    </html>

    212b49891904563556222d95b591135.png

    【推荐学习:javascript高级教程

    以上就是如何在javascript中绘制方块的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript
    上一篇:javascript怎么移除属性 下一篇:javascript如何设置只能输入数字
    第15期线上培训班

    相关文章推荐

    • JavaScript常用属性方法有哪些• 如何调试javascript• javascript如何获取url参数• javascript中怎么使用item方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网