初始canvas-绘制矩形的两种方法

LLL。。

已于 2022-03-04 22:32:18 修改

阅读量376

点赞数 2

文章标签： linq p2p html

于 2022-03-04 21:19:10 首次发布

本文链接：https://blog.csdn.net/weixin_54057363/article/details/123285567

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>初始canvas-绘制矩形的三种方法</title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           body,html{
               background-color: #bfa;
           }
           #test{
               background-color: pink;
               position: absolute;
               margin: auto;
               left: 0;
               right: 0;
               top: 0;
               bottom: 0;

           }
       </style>
   </head>
   <body>
       
       <canvas id="test" width="300" height="300">
           <span>当前浏览器版本不支持,请升级至IE-9或更换其他浏览器</span>
       </canvas>

       <script type="text/javascript">
           window.onload = function(){
           var canvas = document.querySelector('#test');
           if(canvas.getContext){
               var ctx = canvas.getContext('2d');
               //背景填充颜色,给fillRect使用
               ctx.fillStyle = 'red';

               //边框颜色,给strokeRect使用
               ctx.strokeStyle = 'yellow';
               //边框大小,给strokeRect使用
               ctx.lineWidth = 25;
               //边框样式,给strokeRect使用 (round:圆角 bevel:斜角 miter:直角)
               ctx.lineJoin = 'bevel'

   //在画布中绘制矩形的方法 - 偏移量参画布的原点
   //1. 填充矩形画笔.strokeRect(偏移量x,偏移量y,宽,高)
   //注：不加单位
               //ctx.fillRect(0,0,100,100);

       //2. 带边框的矩形画笔.strokeRect(偏移量x,偏移量y,宽,高)
       ctx.strokeRect(100,100,100,100);

       //3. 清除指定矩形区域,让清除部分完全透明
       //画笔.clearRect(偏移量x,偏移量y,宽,高)
           //ctx.clearRect(100,100,100,100)
           }
           }
       </script>
   </body>
</html>