数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML5 Canvas 中的合成属性
HTML5 canvas 提供合成属性 globalCompositeOperation ，它影响所有绘图操作。
<!DOCTYPE HTML>
<html>
<head>
<script>
var compositeTypes = [
'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out',
'destination-atop','lighter','darker','copy','xor'
];
function drawShape(){
for (i = 0; i < compositeTypes.length; i++){
var label = document.createTextNode(compositeTypes[i]);
document.getElementById('lab'+i).appendChild(label);
var ctx = document.getElementById('tut'+i).getContext('2d');
// draw rectangle
ctx.fillStyle = "#FF3366";
ctx.fillRect(15,15,70,70);
// set composite property
ctx.globalCompositeOperation = compositeTypes[i];
// draw circle
ctx.fillStyle = "#0066FF";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
}
}
</script>
</head>
<body onload = "drawShape();">
<table border="1" align = "center">
<tr>
<td><canvas id = "tut0" width = "125" height = "125"></canvas><br/>
<label id = "lab0"></label>
</td>
<td><canvas id = "tut1" width = "125" height = "125"></canvas><br/>
<label id = "lab1"></label>
</td>
<td><canvas id = "tut2" width = "125" height = "125"></canvas><br/>
<label id = "lab2"></label>
</td>
</tr>
<tr>
<td><canvas id = "tut3" width = "125" height = "125"></canvas><br/>
<label id = "lab3"></label>
</td>
<td><canvas id = "tut4" width = "125" height = "125"></canvas><br/>
<label id = "lab4"></label>
</td>
<td><canvas id = "tut5" width = "125" height = "125"></canvas><br/>
<label id = "lab5"></label>
</td>
</tr>
<tr>
<td><canvas id = "tut6" width = "125" height = "125"></canvas><br/>
<label id = "lab6"></label>
</td>
<td><canvas id = "tut7" width = "125" height = "125"></canvas><br/>
<label id = "lab7"></label>
</td>
<td><canvas id = "tut8" width="125" height = "125"></canvas><br/>
<label id = "lab8"></label>
</td>
</tr>
<tr>
<td><canvas id = "tut9" width = "125" height = "125"></canvas><br/>
<label id = "lab9"></label>
</td>
<td><canvas id = "tut10" width = "125" height = "125"></canvas><br/>
<label id = "lab10"></label>
</td>
<td><canvas id = "tut11" width = "125" height = "125"></canvas><br/>
<label id = "lab11"></label>
</td>
</tr>
</table>
</body>
</html>
更新于: 2020-01-29
170 次浏览
广告