HTML5 Canvas 绘制矩形

在HTML5画布元素上最容易绘制的形状之一是矩形。您可以使用2D上下文函数fillRect()和进行操作strokeRect()。

ini 复制代码
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">    
HTML5 Canvas not supported    
</canvas>    
<script>       
var canvas  = document.getElementById("ex1");    
var context = canvas.getContext("2d");    
context.fillStyle = "#ff0000";    
context.fillRect(10,10, 100,100);    
context.strokeStyle = "#0000ff";    
context.strokeRect(30,20, 120,110);      
</script>

行宽 - lineWidth

您可以使用lineWidth2D上下文的属性设置描边矩形的线宽。方法如下:

ini 复制代码
<canvas id="ex4" width="500" height="150" style="border: 1px solid #cccccc;">    
HTML5 Canvas not supported    
</canvas>    
<script>       
var canvas  = document.getElementById("ex4");    
var context = canvas.getContext("2d");    
var x = 10;    
var y = 10;    
var width = 100;    
var height = 100;    
context.lineWidth = 4;    
context.strokeRect(x, y, width, height);      
</script>

矩形颜色

您可以使用 2D上下文的fillStyle或strokeStyle属性设置绘制矩形的颜色。这是第一个示例,这些设置以粗体显示:

ini 复制代码
<canvas id="ex5" width="500" height="150" style="border: 1px solid #cccccc;">    
HTML5 Canvas not supported    
</canvas>    
<script>       
var canvas  = document.getElementById("ex5");    
var context = canvas.getContext("2d");    
context.fillStyle = "#ff0000";    
context.fillRect(10,10, 100,100);    
context.strokeStyle = "#0000ff";    
context.strokeRect(30,20, 120,110);    
</script>

引用

菜鸟教程

相关推荐
龙在天6 分钟前
如何做虚拟滚动列表缓冲区?流畅又不出现白屏
前端
跟橙姐学代码7 分钟前
PyInstaller打包避坑全攻略:新手一看就会,老手也能涨姿势
前端·python·ipython
FanetheDivine7 分钟前
在react中处理输入法合成问题
前端·react.js
yinuo12 分钟前
Uni-App跨端开发实战:编译H5跳转全平台终极指南(03)
前端
天蓝色的鱼鱼13 分钟前
为什么 Vite 选择 Rolldown?一次关于性能、生态与未来的深度权衡
前端·vite
郭邯17 分钟前
vant-weapp源码解读(2)
前端
用户857594145002918 分钟前
面试官问你:flex:0 和 flex:auto 的区别?你该如何回答?
前端
渊不语24 分钟前
React + Webpack + React Router + TypeScript + Ant Design 多子项目工程化
前端
路修远i24 分钟前
项目中JSSDK封装方案
前端·架构
一蓑烟雨,一任平生26 分钟前
h5实现内嵌微信小程序&支付宝 --截图保存海报分享功能
开发语言·前端·javascript