JavaScript画布绘制填充矩形
时间: 2023-11-11 22:02:10 浏览: 60
下面是JavaScript画布绘制填充矩形的示例代码:
```javascript
// 获取画布元素
var canvas = document.getElementById("myCanvas");
// 获取画布上下文
var context = canvas.getContext("2d");
// 设置矩形填充颜色
context.fillStyle = "#FF0000";
// 绘制矩形
context.fillRect(10, 10, 100, 50);
```
上述代码中,首先通过`document.getElementById`方法获取到画布元素,然后使用`getContext`方法获取画布的上下文。接着,使用`fillStyle`属性设置矩形填充颜色,然后使用`fillRect`方法绘制矩形,参数分别表示矩形左上角坐标的x、y值,以及矩形的宽度和高度。
相关问题
使用画布在50px*50px的位置绘制出一个大小为100px的矩形的代码
可以使用 HTML5 中的 Canvas 元素来绘制矩形,可以通过以下代码在50px * 50px 的位置绘制一个大小为100px的矩形:
```html
<canvas id="myCanvas" width="200" height="200"></canvas>
```
```javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
```
canvas 元素的 width 和 height 属性分别设置了画布的宽度和高度,这里设置为200px * 200px。通过获取画布的上下文对象(context),可以使用 fillRect 方法来绘制矩形,fillStyle 属性设置填充颜色,fillRect(x, y, width, height) 方法接收四个参数,分别是矩形左上角的 x、y 坐标,以及矩形的宽度和高度。这里的 x 和 y 坐标分别设置为50,表示在50px * 50px 的位置绘制矩形。
JavaScript画图
以下是一个JavaScript画图的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Demo</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
</body>
</html>
```
这个例子创建了一个500x500的画布,并在画布上绘制了一个红色的矩形。其中,`getContext("2d")`方法获取了一个2D绘图的上下文对象,`fillStyle`属性设置了填充颜色,`fillRect()`方法绘制了一个填充矩形。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)