利用HTML5 Canvas API绘制矩形的超级攻略

2019-01-28 15:19:14王冬梅
  1. function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){            cxt.beginPath();   
  2.         cxt.rect(x, y, width, height);            //cxt.closePath();    可以不用closePath()   
  3.            cxt.lineWidth = borderWidth;   
  4.         cxt.strokeStyle = borderColor;            cxt.fillStyle = fillColor;   
  5.            cxt.fill();   
  6.         cxt.stroke();    }  

调用封装方法,绘制魔性图像
来个有魔性的图像~
2016321105759647.jpg (500×375)

好,我们就拿它开刀,练练手,给咱刚封装好的方法活动活动筋骨。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>    <html lang="zh">   
  2. <head>        <meta charset="UTF-8">   
  3.     <title>绘制魔性图形</title>    </head>   
  4. <body>    <div id="canvas-warp">   
  5.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">            你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  6.     </canvas>    </div>   
  7.    <script>   
  8.     window.onload = function(){            var canvas = document.getElementById("canvas");   
  9.         canvas.width = 800;            canvas.height = 600;   
  10.         var context = canvas.getContext("2d");