html网页中绘制无填充矩形的教程

 2022-03-19    702  

实例说明:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

标签含义:

strokeRect元素为绘制矩形(无填充),笔触的默认颜色是黑色。

提示:请使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

x       要清除的矩形左上角的 x 坐标。

y       要清除的矩形左上角的 y 坐标。

width     要清除的矩形的宽度,以像素计。

height   要清除的矩形的高度,以像素计。

源代码运行结果如下:

image.png


  •  标签:  
  • html
  •  

原文链接:https://77isp.com/post/760.html

=========================================

https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台,请勿相信其他任何渠道。