我制作了一些画布,我画了一个圆圈和许多其他形状。我已经创建了一个_rotate()
函数,用于清除(删除内容)画布并调用一个绘制正方形的函数。问题是,点击旋转后不仅绘制了方形,而且绘制了圆形和矩形。我不知道代码可能出现什么问题所以我正在接受任何建议。
实际代码:
var c = document.getElementById("canv");
var canvas = c.getContext("2d");
//ciarka
function _rotate() {
canvas.clearRect(0, 0, 600, 400);
stvorec(Math.random());
return;
}
function stvorec(param) {
canvas.rotate(param*Math.PI/180);
canvas.fillStyle="green";
canvas.fillRect(350,50,50,50);
canvas.stroke();
}
function ciarka() {
canvas.beginPath();
canvas.moveTo(10,10);
canvas.lineTo(50,30);
canvas.lineTo(100,10);
canvas.lineTo(150,30);
canvas.lineTo(200,10);
canvas.lineTo(250,30);
canvas.lineTo(300,10);
canvas.lineTo(350,30);
canvas.lineTo(400,10);
canvas.lineTo(450,30);
canvas.lineTo(500,10);
canvas.lineTo(550,30);
canvas.lineTo(590,10);
canvas.stroke();
}
//obdlznik
function obdlznik() {
canvas.rect(150,150,100,50);
canvas.strokeStyle="black";
canvas.stroke();
}
//kruh
function kruh() {
canvas.beginPath();
canvas.arc(200,80,50,0,2.0*Math.PI);
canvas.stroke();
}
//stvorec
stvorec();
ciarka();
kruh();
obdlznik();
$("body").on("click", "#rot", function() {
_rotate();
});
Jsfiddle供参考:jsfiddle
答案 0 :(得分:1)
我看到您的代码中出现了一些问题:
不是故障,而只是命名奇怪:你调用了你的上下文变量canvas
。上下文变量通常称为context
或ctx
我不知道您的设计要求,但这里有一些重构的工作代码:
http://jsfiddle.net/m1erickson/5PuW9/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var c = document.getElementById("canv");
var canvas = c.getContext("2d");
//ciarka
function _rotate() {
canvas.clearRect(0, 0, 600, 400);
stvorec(Math.random()*360);
}
function stvorec(param) {
canvas.save();
canvas.beginPath();
canvas.translate(350,50);
canvas.rotate(param*Math.PI/180);
canvas.fillStyle="green";
canvas.fillRect(-25,-25,50,50);
canvas.restore();
}
function ciarka() {
canvas.beginPath();
canvas.moveTo(10,10);
canvas.lineTo(50,30);
canvas.lineTo(100,10);
canvas.lineTo(150,30);
canvas.lineTo(200,10);
canvas.lineTo(250,30);
canvas.lineTo(300,10);
canvas.lineTo(350,30);
canvas.lineTo(400,10);
canvas.lineTo(450,30);
canvas.lineTo(500,10);
canvas.lineTo(550,30);
canvas.lineTo(590,10);
canvas.stroke();
}
//obdlznik
function obdlznik() {
canvas.beginPath();
canvas.rect(150,150,100,50);
canvas.strokeStyle="black";
canvas.stroke();
}
//kruh
function kruh() {
canvas.beginPath();
canvas.arc(200,80,50,0,2.0*Math.PI);
canvas.closePath();
canvas.stroke();
}
//stvorec
stvorec();
ciarka();
kruh();
obdlznik();
$("#test").click(function() {
_rotate();
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="test">Test</button><br>
<canvas id="canv" width=600 height=400></canvas>
</body>
</html>
[添加了beginPath和负坐标的说明]
关于context.beginPath()
将beginPath()和fill()/ stroke()视为上下文路径绘制命令周围所需的括号。
如果不使用每组新的路径绘制命令执行beginPath,则在调用下一个fill()/ stroke()时将重新执行所有先前的路径绘制命令。
例如:
// circle#1
context.beginPath();
context.arc(100,100,10,0,Math.PI*2);
context.closePath();
context.fillStyle=”green”;
context.fill();
// circle#2 -- Note: no beginPath here
context.arc(200,200,10,0,Math.PI*2);
context.closePath();
context.fillStyle=”green”;
context.fill();
在此示例中,将绘制圆#1。但由于第2个圆圈的代码中没有beginPath,因此圆圈#1将与<2>圆圈一起重绘。
两个圆圈都是绿色的,因为每个beginPath只允许1个样式(将使用最后一个fillStyle =“green”,并且不会使用红色样式)。
关于旋转和负坐标
要旋转,您应该告诉上下文要旋转的坐标点。
这称为设置旋转点。默认情况下,上下文将设置画布左上角的旋转点,以便每个后续绘图将围绕画布的左上角旋转。
要设置自己的旋转点,请执行context.translate(myCenterX,myCenterY)。
然后所有后续的抽奖将围绕myCenterX,myCenterY。
将此视为在一张纸上拿着铅笔点。纸张围绕铅笔点旋转。
现在绘制矩形。
由于上下文从矩形的左上角绘制矩形,因此矩形将围绕其左上角旋转。
要围绕矩形的中心旋转,必须使用负坐标向左上方拉动矩形,直到矩形位于旋转点的中心。
这意味着您必须使用fillRect(-rectWidth / 2,-rectHeight / 2)将矩形置于旋转点的中心。
答案 1 :(得分:0)
这是一个简单的修复:
//obdlznik
function obdlznik() {
canvas.save();
canvas.beginPath(); // add this and you're good to go!
canvas.rect(150, 150, 100, 50);
canvas.strokeStyle = "black";
canvas.stroke();
canvas.restore();
}
<强> Modified fiddle here 强>
(此处严格不需要保存/恢复)。