我的demo需要在每一次点击前刷新才能正常的显示图片，另外顶部的文字有的时候不能正确的显示，不知道是什么原因，希望大家可以帮我看一下，十分感谢！
qq_悄悄_0
2016-07-11 16:43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#buttons{margin:50px 10%;}
#buttons a{margin-top:50px;margin-right:10px;text-decoration:none;font-size:20px;color:black;padding:5px;border:1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" height="800" width="1200" style="margin: 0 20%;border:1px solid black;">此浏览器不支持canvas,请更换浏览器</canvas>
<div id="buttons">
<a href="#">source-over</a>
<a href="#">source-atop</a>
<a href="#">source-in</a>
<a href="#">source-out</a>
<a href="#">destination-over</a>
<a href="#">destination-atop</a>
<a href="#">destination-in</a>
<a href="#">destination-out</a>
<a href="#">lighter</a>
<a href="#">xor</a>
<a href="#">copy</a>
</div>
<script type="text/javascript">
window.onload=function(){
draw("source-over");
var buttons=document.getElementById("buttons").getElementsByTagName("a");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
draw(this.text);
return false;
}
}
}
function draw(compositeStyle){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
/**清空画布**/
context.clearRect(0,0,canvas.width,canvas.height);
/**标题**/
context.font="bold 40px sans-serif";
context.textAlign="center";
context.textBaseline="middle";
context.fillText("globalCompsitionOperation的值为："+compositeStyle,canvas.width/2,60);
/**方框**/
context.fillStyle="blue";
context.fillRect(300,150,500,500);
context.globalCompositeOperation =compositeStyle;
/**三角形**/
context.fillStyle="red";
context.beginPath();
context.moveTo(700,250);
context.lineTo(1000,750);
context.lineTo(400,750);
context.closePath();
context.fill();
}
</script>
</body>
</html>
7回答
-
- 慕粉3591791
- 2016-07-13 22:23:23
洗了个澡！！！问题解决！是画字的问题，因为globalCompsitionOperation的属性，如destination-out只显示先画的没有重复部分，也就是说其他部分全部被清理！解决方案用离屏canvas技术！！！
-
- 小王子抓猫咪
- 2017-08-27 00:38:03
都是人才，很简单的问题。这需要用clip()吗
只需要在
var context = canvas.getContext("2d");
这段代码之后再加入宽度和高度设置即可
canvas.width = 1200;
canvas.height = 800;
保证可行。
-
- young0098
- 2017-01-03 10:45:22
刚刚也提了这个问题，就看到了这个问题解决了。不用离屏，用clip也可以，globalCompositeOperation影响的是canvas上已有的所有图形跟要画的图形的关系处理，即使已有的图形跟要画的没有重叠也会被影响，所以用clip限制将要画的图形范围，就不会影响所有已有的图形。
-
- 晓琳GO
- 2016-09-07 10:57:32
需要使用context.clip() 对绘制区域进行一个剪辑出来，在剪辑区域进行绘制矩形和三角形
-
- qq_扎根垄上_0
- 2016-08-18 19:16:35
46677
6687877
y78787878
-
- 慕粉3591791
- 2016-07-13 21:37:30
这个问题困扰了我一天了！初步判定是在canvas中画字的缘故，但是具体问题在哪里我还没有找到，找到告诉你。
-
- 慕慕9986984
- 2016-07-13 21:08:21
程序我也跑了一下，有同样的问题，但找不到！
Canvas绘图详解
72881 学习 · 422 问题
相似问题