用HTML5和javascript编写画图程序，当点击第二个画笔的图像时，之前点击的画笔的CSS效果无法去掉？？
用HTML5和javascript编写画图程序，当点击第二个画笔的图像时，之前点击的画笔的CSS效果无法去掉？？<html><head><title>asimplepai...
用HTML5和javascript编写画图程序，当点击第二个画笔的图像时，之前点击的画笔的CSS效果无法去掉？？
<html>
<head>
<title>
a simple paint program
</title>
<style type="text/css">
img.selected{
border: 1.2px solid #42c8e8;
}
canvas {
border: 0.8px solid #42c8e8;
width:600px;
height:auto;
}
img {
width:40px;
height:auto;
}
</style>
</head>
<body>
<script type="text/javascript">
var canvas;
var context;
window.onload = function() {
// body...
canvas = document.getElementById('drawCanvas');
context = canvas.getContext("2d");
context.translate(0,0);
canvas.onmousedown = startDrawing;
canvas.onmouseout = stopDrawing;
canvas.onmouseup = stopDrawing;
canvas.onmousemove = draw;
}
function changeColorElement(color,imgElement) {
// body...
context.strokeStyle = color;
imgElement.className = "selected";
if (previousColorElement.className != null) {
previousColorElement.className = "";
}
previousColorElement = imgElement;
}
var isDrawing = false;
function startDrawing(e) {
isDrawing = true;
context.beginPath();
context.moveTo(e.pageX - canvas.offsetLeft,e.pageY - canvas.offsetTop);
}
function stopDrawing() {
// body...
isDrawing = false;
}
function draw(e) {
// body...
if (isDrawing == true) {
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
context.lineTo(x,y);
context.stroke();
}
}
</script>
<div id = "toolbar">
<img id="pinkPen" onclick= "changeColorElement('pink',this)" src="1.jpg">
<img id="bluePen" onclick= "changeColorElement('blue',this)" src="2.jpg">
<img id = "purplePen" onclick= "changeColorElement('purple',this)" src="">
</div>
<canvas id = "drawCanvas">sorry your browser don't support HTML5canvas</canvas>
</body>
</html> 展开
<html>
<head>
<title>
a simple paint program
</title>
<style type="text/css">
img.selected{
border: 1.2px solid #42c8e8;
}
canvas {
border: 0.8px solid #42c8e8;
width:600px;
height:auto;
}
img {
width:40px;
height:auto;
}
</style>
</head>
<body>
<script type="text/javascript">
var canvas;
var context;
window.onload = function() {
// body...
canvas = document.getElementById('drawCanvas');
context = canvas.getContext("2d");
context.translate(0,0);
canvas.onmousedown = startDrawing;
canvas.onmouseout = stopDrawing;
canvas.onmouseup = stopDrawing;
canvas.onmousemove = draw;
}
function changeColorElement(color,imgElement) {
// body...
context.strokeStyle = color;
imgElement.className = "selected";
if (previousColorElement.className != null) {
previousColorElement.className = "";
}
previousColorElement = imgElement;
}
var isDrawing = false;
function startDrawing(e) {
isDrawing = true;
context.beginPath();
context.moveTo(e.pageX - canvas.offsetLeft,e.pageY - canvas.offsetTop);
}
function stopDrawing() {
// body...
isDrawing = false;
}
function draw(e) {
// body...
if (isDrawing == true) {
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
context.lineTo(x,y);
context.stroke();
}
}
</script>
<div id = "toolbar">
<img id="pinkPen" onclick= "changeColorElement('pink',this)" src="1.jpg">
<img id="bluePen" onclick= "changeColorElement('blue',this)" src="2.jpg">
<img id = "purplePen" onclick= "changeColorElement('purple',this)" src="">
</div>
<canvas id = "drawCanvas">sorry your browser don't support HTML5canvas</canvas>
</body>
</html> 展开
2个回答
展开全部
previousColorElement
你没定义这玩意就用了
你没定义这玩意就用了
更多追问追答
追问
哎？这个不用吧，他会自己变成全局变量的，而且我加了，没效果呢
追答
不不不不..我的意思是你previousColorElement应该是用来定义上一个选择的画笔类型，但是你很糟糕的没给这个对象赋上一个画笔类型的值，于是乎你去清空这个previousColorElement实际上就是在清空一个本来就是空的毫无意义的东西...而且这玩意根本没变成全局变量...因为至少在你给的代码里面你全局没声明这个变量....私信个联系方式我吧
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
画之前context.save()一下，画完还原context.restore);
追问
不是，我是说选中画笔的时候，套在画笔上的效果没办法消除
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
