canvas-矩形

2024-04-27 15:08:09

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>canvas-矩形</title>    <style>        #canvas{            border: 1px solid palevioletred;        }    </style>    <script>      window.onload = function (){          //获取到canvas元素          var canvas = document.getElementById('canvas');          //获取canvas中的画图环境          var context = canvas.getContext('2d');          //开启新的一条路径          context.beginPath();          //第一种 ：绘制矩形路径的方式          //绘制矩形          context.rect(100,100,200,100);          //描边          context.stroke();          //填充          context.fill();          //第二种 ：直接绘制矩形边框          context.strokeRect(100,210,200,100);          //第三种 ：直接绘制填充矩形          context.fillRect(100,320,200,100);          //矩形擦除          context.clearRect(200,100,20,420);          //擦除整个画布          //context.clearRect(0,0,canvas.width,canvas.height);      }    </script></head><body>    <canvas id="canvas" width="500px" height="500px">    </canvas></body></html>

上一篇：javascript初识

下一篇：html输入框内文字鼠标点击隐藏或者输入隐藏