canvas画矩形之清除,描边与填充

最新推荐文章于 2022-05-12 12:25:07 发布

原创最新推荐文章于 2022-05-12 12:25:07 发布 · 6.6k 阅读

0 ·

CC 4.0 BY-SA版权

Html5_学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文将详细讲解如何利用HTML5的canvas元素进行矩形的绘制，包括如何清除矩形区域，设置描边样式以及填充颜色。通过对canvas API的深入理解，你可以创建出更加丰富的图形交互界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<!--		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-->
<html>
   <head>
     <title>Rectangles</title>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style> 
         body {
            background: #dddddd;
         }

         #canvas {
            background: #eeeeee;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

  <body>
    <canvas id='canvas' width='600' height='400'>
      Canvas not supported
    </canvas>

    <script>
    	var canvas=document.getElementById('canvas'),
    	    context=canvas.getContext('2d');
    	    
    	    context.lineWidth=5;
    	    context.font='24px Helvetica';
    	    context.fillText('点这儿',175,40);
    	    
    	    //为指定矩形描边 如果后两个参数中任何一个为0，则画横线或者竖线,都为0则不绘制
    	    context.strokeRect(75,100,200,200);
    	    //填充矩形，如何后两个参数任意一个为0，则不绘制
    	    context.fillRect(325,100,200,200);
    	    
    	    context.canvas.onmousedown=function(e){
    	    	//清除指定区域的所有像素
    	    	context.clearRect(0,0,canvas.width,canvas.height);
    	    };
    	    
    	
    </script>
  </body>
</html>

演示地址：http://sandbox.runjs.cn/show/lw3bxgqv