canvas api绘制漂亮的警告牌
时间: 2023-11-14 20:06:12 浏览: 127
Canvas API是HTML5提供的一个绘图API,可以用来绘制各种图形、动画等。下面是一个示例代码,使用Canvas API绘制一个漂亮的警告牌。
HTML代码:
```html
<canvas id="canvas"></canvas>
```
JavaScript代码:
```javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 绘制背景色
ctx.fillStyle = "#ffcc00";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制边框
ctx.strokeStyle = "#ff6600";
ctx.lineWidth = 5;
ctx.strokeRect(0, 0, canvas.width, canvas.height);
// 绘制警告图标
ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.moveTo(canvas.width / 2 - 20, canvas.height / 2 - 20);
ctx.lineTo(canvas.width / 2, canvas.height / 2 + 20);
ctx.lineTo(canvas.width / 2 + 20, canvas.height / 2 - 20);
ctx.closePath();
ctx.fill();
// 绘制文字
ctx.fillStyle = "#ffffff";
ctx.font = "bold 24px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("警告", canvas.width / 2, canvas.height / 2 + 50);
```
该代码使用Canvas API绘制了一个黄色背景、橙色边框、红色警告图标和白色文字的警告牌。你可以根据需要修改颜色、大小、位置等参数来自定义你的警告牌。
阅读全文