html 5中，如何用javascript在canvas里画出一个笑脸？
你好，可以帮我看看下面的代码哪里错了吗？谢谢你了。<!DOCTYPEHTML><html><head><title>Face</title><scriptsrc="../...
你好，可以帮我看看下面的代码哪里错了吗？谢谢你了。
<!DOCTYPE HTML>
<html>
<head>
<title>Face</title>
<script src="../lib/fit.js"></script>
<script type="text/javascript">
function init() {
var canvas;
var pen;
canvas = getCanvas("myCanvas");
pen = getContext(canvas, "2d");
clearEllipse(pen, 250, 250, 400, 400)
clearEllipse(pen, 125, 200, 50, 50)
clearEllipse(pen, 325, 200, 50, 50)
line(pen, 200, 350, 300, 350)
clearRect(pen, 235, 250, 30, 50)
}
</script>
</head>
<body onload="init();">
<p>Glory to God</p>
<canvas id="myCanvas" width="1000" height="1000">Your browser displays this message if it doesn't support the HTML5 canvas.'</canvas>
</body>
</html> 展开
<!DOCTYPE HTML>
<html>
<head>
<title>Face</title>
<script src="../lib/fit.js"></script>
<script type="text/javascript">
function init() {
var canvas;
var pen;
canvas = getCanvas("myCanvas");
pen = getContext(canvas, "2d");
clearEllipse(pen, 250, 250, 400, 400)
clearEllipse(pen, 125, 200, 50, 50)
clearEllipse(pen, 325, 200, 50, 50)
line(pen, 200, 350, 300, 350)
clearRect(pen, 235, 250, 30, 50)
}
</script>
</head>
<body onload="init();">
<p>Glory to God</p>
<canvas id="myCanvas" width="1000" height="1000">Your browser displays this message if it doesn't support the HTML5 canvas.'</canvas>
</body>
</html> 展开
2个回答
展开全部
利用基本路径API
注意最后fill或stroke上去后之前缓存的路径信息才会绘制到canvas上去
function drawShape(){
var canvas = document.getElementById('你的canvas的ID');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // 外圆
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // 嘴
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); //左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke();
} else {
alert('你的浏览器不支持html5，请用chrome或火狐safari .');
}
}
注意最后fill或stroke上去后之前缓存的路径信息才会绘制到canvas上去
function drawShape(){
var canvas = document.getElementById('你的canvas的ID');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // 外圆
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // 嘴
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); //左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke();
} else {
alert('你的浏览器不支持html5，请用chrome或火狐safari .');
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
展开全部
canvas = getCanvas("myCanvas");
改成
canvas = document.getElementById('myCanvas');
改成
canvas = document.getElementById('myCanvas');
追问
还是不可以。。。唉，好难过呢。。。
追答
你能好好看看人家这个怎么写的么？ 你那学的h5 语法完全不对啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
