<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Example</title> </head> <body> <canvas id="canvasId” width="165” height="145"></canvas></body> </html> <script type="text/javascript"> var context = document.getElementById ('canvasId').getContext("2d"); function draw() { var width = 125;//图形的宽度 var height = 105;//图形的高度 var padding = 20; context.beginPath(); context.moveTo(padding + width/2, padding);//顶点 context.lineTo(padding + width, height + padding); // 右下角 context.lineTo(padding, height + padding);// 左下角 context.closePath(); context.shadowBlur=10; context.shadowColor="black"; gradient=context.createLinearGradient(0,padding,0,padding+height); gradient.addColorStop(0,"#faf100"); gradient.addColorStop(0.9,"#fca009"); gradient.addColorStop(1,"#ffc821"); context.linewidth = 20; context.lineJoin = "round"; context.strokeStyle = gradient; context.stroke(); context.shadowColor ="transparent"; context.fillStyle = gradient; context.fill(); //绘制黑色边框 context.lineWidth = 5; context.lineJoin = "round"; context.strokeStyle = "#333"; context.stroke(); //绘制中心的感叹号 context.textAlign = "center"; context.textBaseline = "middle"; context.font = "bold 60px'Times New Roman', Times, serif"; context.fillStyle = "#333"; context.fillText("!",padding+width/2,padding + height/1.5); } window.addEventListener("load",draw,true); </script>
时间: 2024-02-01 22:02:50 浏览: 122
代码中有两个问题：
1. 在HTML中，`canvas`标签的`id`属性值为`"canvasId"`，但是在JavaScript中调用该`canvas`元素时，却将`id`属性值写成了`"canvasId”`，引号后多了一个不需要的字符。需要将该行代码改为：
```javascript
var context = document.getElementById('canvasId').getContext("2d");
```
2. 在`canvas`元素中的`width`和`height`属性值中，双引号中的数字后面含有一个不需要的字符。需要将该行代码改为：
```html
<canvas id="canvasId" width="165" height="145"></canvas>
```
修改完毕后，整个代码应该长这样：
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Example</title>
</head>
<body>
<canvas id="canvasId" width="165" height="145"></canvas>
<script type="text/javascript">
var context = document.getElementById('canvasId').getContext("2d");
function draw() {
var width = 125;//图形的宽度
var height = 105;//图形的高度
var padding = 20;
context.beginPath();
context.moveTo(padding + width/2, padding);//顶点
context.lineTo(padding + width, height + padding); // 右下角
context.lineTo(padding, height + padding);// 左下角
context.closePath();
context.shadowBlur=10;
context.shadowColor="black";
gradient=context.createLinearGradient(0,padding,0,padding+height);
gradient.addColorStop(0,"#faf100");
gradient.addColorStop(0.9,"#fca009");
gradient.addColorStop(1,"#ffc821");
context.linewidth = 20;
context.lineJoin = "round";
context.strokeStyle = gradient;
context.stroke();
context.shadowColor ="transparent";
context.fillStyle = gradient;
context.fill();
//绘制黑色边框
context.lineWidth = 5;
context.lineJoin = "round";
context.strokeStyle = "#333";
context.stroke();
//绘制中心的感叹号
context.textAlign = "center";
context.textBaseline = "middle";
context.font = "bold 60px'Times New Roman', Times, serif";
context.fillStyle = "#333";
context.fillText("!",padding+width/2,padding + height/1.5);
}
window.addEventListener("load",draw,true);
</script>
</body>
</html>
```
希望这可以帮到您！
阅读全文
相关推荐
