HTML5 canvas基本绘图之图形组合

只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在

1.获取

图形组合：

•globalAlpha： 设置或返回绘图的当前 alpha 或透明值

该方法主要是设置图形的透明度，这里就不具体介绍。

•globalCompositeOperation： 设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值：

下面是一个小示例，可以通过点击改变组合效果：

XML/HTML Code复制内容到剪贴板

>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图形组合title>
<style type="text/css">
#canvas{
border: 1px solid #1C0EFA;
display: block;
margin: 20px auto;
}
#buttons{
width: 1000px;
margin: 5px auto;
clear:both;
}
#buttons a{
font-size: 18px;
display: block;
float: left;
margin-left: 20px;
}
style>
head>
<body>
<canvas id="canvas" width="1000" height="800">
你的浏览器还不支持canvas
canvas>
<div id="buttons">
<a href="#">source-overa>
<a href="#">source-atopa>
<a href="#">source-ina>
<a href="#">source-outa>
<a href="#">destination-overa>
<a href="#">destination-atopa>
<a href="#">destination-ina>
<a href="#">destination-outa>
<a href="#">lightera>
<a href="#">copya>
<a href="#">xora>
div>
body>
<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);
//draw title
context.font = "bold 40px Arial";
context.textAlign = "center";
context.textBasedline = "middle";
context.fillStyle = "#150E0E";
context.fillText("globalCompositeOperation = "+compositeStyle, canvas.width/2, 60);
//draw a rect
context.fillStyle = "#F6082A";
context.fillRect(300, 150, 500, 500);
//draw a triangle
context.globalCompositeOperation = compositeStyle;
context.fillStyle = "#1611F5";
context.beginPath();
context.moveTo(700, 250);
context.lineTo(1000,750);
context.lineTo(400, 750);
context.closePath();
context.fill();
}
script>
html>