绘制并显示笑脸(不显示)
绘制并显示笑脸(不显示)
提问于 2013-11-20 14:59:37
我正试着用canvas标签和javascript做一个笑脸。我将脸部的各个组件作为它们自己的方法(drawFace()，drawEyes()，drawSmile())。我在我的代码底部有这些方法。但没有显示任何内容。当我移除这些方法并将所有代码放入一个巨大的方法中时，它将显示出来。
如何使用这些方法显示面部？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Site's Title</title>
</head>
<body>
<canvas id="myDrawing" width="200" height="200" style="border:1px solid #EEE">
</canvas>
<script>
function drawFace() {
var canvas = document.getElementById("myDrawing");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 0;
var endAngle = 2 * Math.PI;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke();
ctx.fillStyle = "yellow";
ctx.fill();
}
function drawSmile(){
var x = canvas.width / 2;
var y = 160
var radius = 40;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.lineWidth = 7;
// line color
ctx.strokeStyle = 'black';
ctx.stroke();
}
function drawEyes{
var centerX = 40;
var centerY = 0;
var radius = 10;
// save state
ctx.save();
// translate context so height is 1/3'rd from top of enclosing circle
ctx.translate(canvas.width / 2, canvas.height / 3);
// scale context horizontally by 50%
ctx.scale(.5, 1);
// draw circle which will be stretched into an oval
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
ctx.restore();
// apply styling
ctx.fillStyle = 'black';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
//left eye
var centerX = -40;
var centerY = 0;
var radius = 10;
// save state
ctx.save();
// translate context so height is 1/3'rd from top of enclosing circle
ctx.translate(canvas.width / 2, canvas.height / 3);
// scale context horizontally by 50%
ctx.scale(.5, 1);
// draw circle which will be stretched into an oval
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
ctx.restore();
// apply styling
ctx.fillStyle = 'black';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
}
drawFace()
function drawHappyFace(){
drawFace();
drawEyes();
drawSmile();
}
drawHappyFace();
</script>
</body>
</html>回答 3
Stack Overflow用户
发布于 2013-11-20 15:07:37
用下面的代码替换javascript。Here is the fiddle
您在定义drawEyes函数时没有放入"()“。您正在其他函数中使用ctx，这些函数是在第一个应该是全局的函数中定义的。可能需要全局定义一些其他变量。
var canvas = document.getElementById("myDrawing");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 0;
var endAngle = 2 * Math.PI;
function drawFace() {
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke();
ctx.fillStyle = "yellow";
ctx.fill();
}
function drawSmile(){
var x = canvas.width / 2;
var y = 160
var radius = 40;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.lineWidth = 7;
// line color
ctx.strokeStyle = 'black';
ctx.stroke();
}
function drawEyes(){
var centerX = 40;
var centerY = 0;
var radius = 10;
// save state
ctx.save();
// translate context so height is 1/3'rd from top of enclosing circle
ctx.translate(canvas.width / 2, canvas.height / 3);
// scale context horizontally by 50%
ctx.scale(.5, 1);
// draw circle which will be stretched into an oval
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
ctx.restore();
// apply styling
ctx.fillStyle = 'black';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
//left eye
var centerX = -40;
var centerY = 0;
var radius = 10;
// save state
ctx.save();
// translate context so height is 1/3'rd from top of enclosing circle
ctx.translate(canvas.width / 2, canvas.height / 3);
// scale context horizontally by 50%
ctx.scale(.5, 1);
// draw circle which will be stretched into an oval
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
ctx.restore();
// apply styling
ctx.fillStyle = 'black';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
}
drawFace()
function drawHappyFace(){
drawFace();
drawEyes();
drawSmile();
}
drawHappyFace();Stack Overflow用户
发布于 2013-11-20 15:07:50
在声明drawHappyFace函数之前，有一个额外的drawFace()函数调用。而且它后面没有分号，所以它会导致语法错误。
Stack Overflow用户
发布于 2015-07-09 20:26:56
首先，您的drawEyes()函数中缺少函数参数括号。我注意到你在这个函数中也有很多重复的逻辑。
下面，我重构了您的代码以删除任何幻数。现在，您可以绘制任意大小的面，并将其放置在画布上的任何位置。
// =========================================================
// Main
// =========================================================
var canvas = document.getElementById("myDrawing");
drawHappyFace(canvas, {
fill: '#00FF00',
lineColor: '#6F0047'
}, true);
drawHappyFace(canvas, {
fill: '#FFFF00',
x: canvas.width / 2,
y: canvas.height / 2,
radius : 178
});
// =========================================================
// Functons
// =========================================================
function drawFace(canvas, opts) {
var ctx = canvas.getContext("2d");
ctx.save();
ctx.lineWidth = opts.radius * 0.075;
ctx.strokeStyle = opts.lineColor;
ctx.beginPath();
ctx.arc(opts.x, opts.y, opts.radius, opts.startAngle, opts.endAngle);
ctx.stroke();
ctx.fillStyle = opts.fill;
ctx.fill();
ctx.restore();
}
function drawSmile(canvas, opts, flipSmile) {
var ctx = canvas.getContext("2d");
var radius = 40 * opts.radius * 0.0125;
var x = opts.x;
var y, startAngle, endAngle;
if (flipSmile) {
y = opts.y + opts.radius * 0.7;
startAngle = -Math.PI * 0.85; //Math.PI * 0.1;
endAngle = -0.5; //-Math.PI * 1.1;
} else {
y = opts.y + opts.radius * 0.1;
startAngle = Math.PI * 0.1;
endAngle = -Math.PI * 1.1;
}
ctx.save();
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.lineWidth = opts.radius * 0.1;
ctx.strokeStyle = opts.lineColor;
ctx.stroke();
ctx.restore();
}
function drawEyes(canvas, opts) {
var xOffset = opts.radius * 0.5;
var radius = opts.radius * 0.15;
drawEye(canvas, opts, xOffset, 0, radius); // Left
drawEye(canvas, opts, -xOffset, 0, radius); // Right
}
function drawEye(canvas, opts, centerX, centerY, radius) {
var ctx = canvas.getContext("2d");
// Save state
ctx.save();
// Translate context so height is 1/3'rd from top of enclosing circle
ctx.translate(opts.x, opts.y - (opts.radius / 3));
// Scale context horizontally by 50%
ctx.scale(0.5, 1);
// Draw circle which will be stretched into an oval
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// Apply styling
ctx.fillStyle = opts.lineColor;
ctx.fill();
ctx.lineWidth = radius * 0.75;
ctx.strokeStyle = opts.lineColor;
ctx.stroke();
// Restore to original state
ctx.restore();
}
function drawHappyFace(canvas, opts, flipSmile) {
opts = opts || {};
var defaultRadius = 48;
var options = {
x: opts.x || (defaultRadius / 0.9),
y: opts.y || (defaultRadius / 0.9),
radius: opts.radius || defaultRadius,
startAngle: 0,
endAngle: 2 * Math.PI,
fill: opts.fill || 'yellow',
lineColor: opts.lineColor || 'black'
};
drawFace(canvas, options);
drawEyes(canvas, options);
drawSmile(canvas, options, flipSmile);
}#myDrawing {
border: 2px solid #6F6F6F;
background: #DFDFDF;
}<canvas id="myDrawing" width="500" height="500"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20089413
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号