想试着做一个composite的演示，但是无法将<a>的文本赋到变量中，这是为什么呢？
来源：8-2 globalAlpha和globalCompositeOperation
二师弟
2016-05-19 23:26
这是html：
<!doctype html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>合成属性演示</title>
<script type="text/javascript" src="合成.js"></script>
<style type="text/css">
#buttons{
width:600px;
font:14px 微软雅黑;
color: #0277bf;
}
#buttons a{
text-decoration: none;
}
</style>
</head>
<body>
<canvas id='canvas'>看到这段文字请更换浏览器</canvas>
<div id='buttons'>
<a href="#">source-over</a>
<a href="#">source-in</a>
<a href="#">source-out</a>
<a href="#">source-atop</a>
<a href="#">destination-over</a>
<a href="#">destination-in</a>
<a href="#">destination-out</a>
<a href="#">destination-atop</a>
<a href="#">lighter</a>
<a href="#">copy</a>
<a href="#">xor</a>
</div>
</body>
</html>这是js：
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var buttons = document.getElementById('buttons');
var aS = buttons.getElementsByTagName('a');
var compositeType = 'source-out';
for(var i = 0;i<aS.length;i++){
aS[i].onclick = function(){
compositeType = this.text;
}
}
canvas.width = 600;
canvas.height = 400;
context.globalAlpha = 1;
context.globalCompositeOperation = compositeType;
context.beginPath();
context.rect(100,100,200,100);
context.fillStyle = 'red';
context.fill();
context.closePath();
context.beginPath();
context.arc(300,200,75,0,2*Math.PI);
context.fillStyle = 'blue';
context.fill();
context.closePath();
}
写回答
关注
1回答
-
- 王小仙
- 2016-05-20 22:25:53
把绘制的过程封装成一个函数啊，，然后把 compositeType 作为参数传进去，， 你这样写把值都写死了，，虽然每次点击按钮都能改变 compositeType 的值，，但是并不会把 compositeType 给他 context.globalCompositeOperation，，因为你下面的写的绘制过程只会执行一次，，每次点击按钮他们并不会执行，，
Canvas绘图详解
Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图
73027 学习 · 441 问题
相似问题