html5中canvas 错误集锦1（8.28）

最新推荐文章于 2023-09-22 23:16:21 发布

原创最新推荐文章于 2023-09-22 23:16:21 发布 · 945 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5和css3 #canvas #前端 #html5 #绘图

html5和css3 专栏收录该内容

5 篇文章

订阅专栏

这篇博客聚焦于HTML5 Canvas在绘制矩形和圆形时遇到的常见错误，包括fillRect方法参数遗漏以及绘制形状出现异常的问题。通过实例分析，揭示了Canvas绘图的一些潜在陷阱和解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

统一代码：

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>canvas元素示例</title>  
<script type="text/javascript"  src="script.js"charset="gb2312">

</script>  
</head>  
<body onload="draw('canvas');">
<canvas id="canvas" width="400" height="400"/>
</body>
</html>

画矩形

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>canvas元素示例</title>  
<script type="text/javascript"  src="script.js"charset="gb2312">

</script>  
</head>  
<body onload="draw('canvas');">
<canvas id="canvas" width="400" height="400"/>
</body>
</html>

1.fillRect少了一个l 20min

2.fillRect前面稍加了document
记住：所有的方法由对象调用，写方法必须先考虑谁调用了该方法 20min
3.script 中的type="text/javascript"写反了 1h+
同时找到的可能错误的地方
3.1 script中是不能不写type="text/javascript"这句话的
3.2 在传参数时 draw('canvas')的但引号是必须要加的不加的话编译器不会提示但是getContext('2d')不加是会提示的
3.3关于引号：
在HTML5中，当属性值不包括空字符串,”<“,">","=",单引号,双引号等字符时，属性值两边的引号可以省略。

百度结果如下，但事实并非如此，比如id='canvas'就必须加引号，却又但引号双引号都可以；js从来都是严格的要价引号，感觉这就是一个定义不明的黑洞啊。

画圆形：

function draw(id) 
{  
    var canvas = document.getElementById(id);  
    if (canvas == null)  
        return false;  
    var context = canvas.getContext('2d');  
    context.fillStyle = "#EEEEFF";  
    context.fillRect(0, 0, 400, 300);  
    var n = 0; 
    for(var i = 0; i < 10; i++) 
    {  
        context.beginPath();  
        context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);  
        context.closePath();  
        context.fillStyle = 'rgba(255, 0, 0, 0.25)';  
        context.fill();  
    }     
}

canvas圆形
1.draw('canvans')写成draw('cnavans') 20min
可能的错误
1.1<canvas/>斜杠可加可不加
1.2<body onload="draw('canvas');">;可要可不要
1.3<!DOCTYPE HTML>html可大写可小写 <html>可要可不要
2.conrext写成contexr

各种奇形怪状：