zoukankan      html  css  js  c++  java
  • Canvas绘制矩形的三个函数【每日一段代码7】

    <html>
    <head>
    <title>绘制矩形的三个函数</title>
    <script type="application/x-javascript">
    function drawShape(){
    //利用DOM得到canvas元素
    var canvas = document.getElementById("myCanvas");
    //判定浏览器对Canvas的支持与否
    if (canvas.getContext){
    var cxt = canvas.getContext("2d");
    cxt.fillStyle="#FF0055";
    cxt.fillRect(25,25,100,100);//绘制一个填充的矩形
    cxt.clearRect(45,45,60,60);//清除指定矩形区域,并使其完全透明
    cxt.strokeStyle="#0000FF";
    cxt.strokeRect(55,55,40,40);//绘制一个矩形轮廓
    }
    }
    </script>
    </head>
    <body onLoad="drawShape()">
    <canvas id="myCanvas" height="150" width="150" style="border:#06F solid 2px;"></canvas>
    </body>
    </html>

    效果图如下:

    【实例展示了三个绘制矩形的函数。分别是:fillRect(x,y,width,height) :绘制一个填充的矩。clearRect(x,y,width,height) : 清除指定的矩形区域,并使其完全明。strokeRect(x,y,width,height) : 绘制一个矩形轮廓。函数参数x、y代表矩形左上角的坐标,width、height代表矩形的宽和高。】

  • 相关阅读:
    JavaScript中对事件简单的理解
    正则表达式 RE模块
    模块
    面向对象进阶
    元类详细解释
    四.面向对象和函数补充
    四.函数
    Python的基础知识:
    五层协议及tcp三次握手四次挥手
    nginx常见错误
  • 原文地址:https://www.cnblogs.com/naokr/p/2334019.html
Copyright © 2011-2022 走看看