<template>
<div>
<h3>Canvas2D 画矩形rect方法绘制矩形rect(x,y,w,h)(三)</h3>
<h3>
填充矩形
在Canvas中,我们可以使用fillStyle属性和fillRect()方法配合使用来画一个填充矩形。
2D对象.fillStyle=属性值; 2D对象.fillRect(x, y, width, height);
说明:fillStyle属性跟strokeStyle属性一样。
fillStyle属性也必须在fillRect()方法之前定义,否则fillStyle属性无效。
</h3>
<canvas id="canvas" width="400" height="400"></canvas>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {};
},
methods: {
getRefreshCodeFun() {
//需求使用rect方法绘制矩形rect(x,y,w,h),一定要配合stroke()方法进行描边矩形的绘制
//获取canvas对象
var oCanvas = document.getElementById("canvas");
if (oCanvas.getContext) {
//得到2d绘图上下文环境
var oContext = oCanvas.getContext("2d");
//绘制矩形
oContext.rect(30, 30, 50, 60);
//描边绘制
oContext.stroke();
}
},
},
mounted() {
this.getRefreshCodeFun();
},
};
</script>
<style scoped></style>
Canvas2D 画矩形rect方法绘制矩形rect(x,y,w,h)(三)
最新推荐文章于 2024-08-18 10:54:05 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)