canvas之旅仍在繼續(xù)——
html5的API一直在持續(xù)進(jìn)化，相應(yīng)的杀糯，Canvas作為html5的一個(gè)重頭戲扫俺，它的標(biāo)準(zhǔn)也一直在更新。
W3C維護(hù)的標(biāo)準(zhǔn)：https://www.w3.org/TR/2dcontext/
WHATWG維護(hù)的標(biāo)準(zhǔn)：https://html.spec.whatwg.org/
一固翰、在canvas中使用其他html元素
效果圖.jpg
注：其他其他html元素不能放在canvas標(biāo)簽中間
下面的例子可以實(shí)現(xiàn)控件與canvas交互狼纬，點(diǎn)擊綠色按鈕停止或開始運(yùn)動(dòng)，點(diǎn)擊白色按鈕canvas畫布為白色骂际，點(diǎn)擊黑色按鈕canvas畫布為黑色畸颅，示例代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>canvas</title>
<style type="text/css">
#canvas-wrapper{
width:1200px;
height:800px;
position:relative;
margin: 50px auto;
}
#canvas{
border: 1px solid #aaa;
}
#controller{
position:absolute;
top:30px;
left:30px;
background-color: rgba(0,85,116,0.7);
padding:5px 20px 25px 20px;
border-radius:10px 10px;
}
#controller h1{
color:white;
font-weight: bold;
font-family: Microsoft Yahei;
}
#controller #canvas-btn{
display: inline-block;
background-color: #8b0;
color:white;
font-size: 14px;
padding: 5px 15px;
border-radius:6px 6px;
text-decoration: none;
margin-top: 10px;
margin-right: 20px;
}
#controller #canvas-btn:hover{
text-decoration: none;
background-color: #7a0;
}
#controller .color-btn{
display: inline-block;
padding: 5px 15px;
border-radius:6px 6px;
font-size: 14px;
text-decoration: none;
margin-top: 10px;
margin-right: 5px;
}
#controller .color-btn:hover{
text-decoration: none;
}
#controller #white-color-btn{
background-color: white;
}
#controller #black-color-btn{
background-color: black;
}
</style>
</head>
<body >
<div id="canvas-wrapper">
<canvas id="canvas"><!--1.其他html的控件不能放置在canvas標(biāo)簽中間 2.canvas本身不是透明的，它默認(rèn)的背景色是白色的-->
當(dāng)前瀏覽器不支持canvas方援，請(qǐng)更換瀏覽器后再試
</canvas>
<div id="controller">
<h1>canvas繪圖之旅</h1>
<a href="#" id="canvas-btn">停止運(yùn)動(dòng)</a>
<a href="#" class="color-btn" id="white-color-btn"></a>
<a href="#" class="color-btn" id="black-color-btn"></a>
</div>
</div>
<script type="text/javascript">
var balls=[];
var isMoving=true;//設(shè)置小球是否運(yùn)動(dòng)
var themeColor="white";//控制畫面背景色
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=1200;
canvas.height=800;
var context=canvas.getContext('2d');
//畫出100個(gè)圓
for(var i=0;i<100;i++){
var R=Math.floor(Math.random()*255);
var G=Math.floor(Math.random()*255);
var B=Math.floor(Math.random()*255);
var radius=Math.random()*50+20;
aBall={
color:"rgb("+R+","+G+","+B+")",
radius:radius,
x:Math.random()*(canvas.width-2*radius)+radius,
y:Math.random()*(canvas.height-2*radius)+radius,
vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)),
vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100))
}
balls[i]=aBall;
}
//實(shí)現(xiàn)動(dòng)畫
setInterval(function(){
draw(context);
if(isMoving){
update(canvas.width,canvas.height);
}
},50);
//事件加載
document.getElementById("canvas-btn").onclick=function(event){
if(isMoving){
isMoving=false;
this.text="開始運(yùn)動(dòng)";
}
else{
isMoving=true;
this.text="停止運(yùn)動(dòng)";
}
return false;
}
document.getElementById("white-color-btn").onclick=function(event){
themeColor="white";
return false;
}
document.getElementById("black-color-btn").onclick=function(event){
themeColor="black";
return false;
}
}
function draw(cxt){
var canvas=cxt.canvas;
cxt.clearRect(0,0,canvas.width,canvas.height);
if(themeColor=="black")
{
cxt.fillStyle="black";
cxt.fillRect(0,0,canvas.width,canvas.height);
}
for(var i=0;i<balls.length;i++){
//cxt.globalCompositeOperation="lighter";//設(shè)置遮擋效果
cxt.fillStyle=balls[i].color;
cxt.beginPath();
cxt.arc(balls[i].x,balls[i].y,balls[i].radius,0,Math.PI*2);
cxt.closePath();
cxt.fill();
}
}
function update(canvasWidth,canvasHeight){
for(var i=0;i<balls.length;i++){
balls[i].x+=balls[i].vx;
balls[i].y+=balls[i].vy;
if(balls[i].x-balls[i].radius<=0){
balls[i].vx=-balls[i].vx;
balls[i].x=balls[i].radius;
}
if(balls[i].x+balls[i].radius>=canvasWidth){
balls[i].vx=-balls[i].vx;
balls[i].x=canvasWidth-balls[i].radius;
}
if(balls[i].y-balls[i].radius<=0){
balls[i].vy=-balls[i].vy;
balls[i].y=balls[i].radius;
}
if(balls[i].y+balls[i].radius>=canvasHeight){
balls[i].vy=-balls[i].vy;
balls[i].y=canvasHeight-balls[i].radius;
}
}
}
</script>
</body>
</html>
二没炒、繪制橢圓
context.ellipse(x,y,radiusx,radiusy,rotation,startingAngle,endingAngle);
如何解決瀏覽器是否支持ellipse？代碼示例如下：
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//瀏覽器支持ellipse時(shí)繪制橢圓
if(context.ellipse){
context.beginPath();
context.ellipse(400,400,300,200,0,0,Math.PI*2);
context.stroke();
}
else{
alert("no ellipse");
}
}
</script>
三犯戏、擴(kuò)展canvas的context
示例代碼如下：
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//********************************************設(shè)計(jì)屬于自己的API
//在context中加入新的方法送火，方法名為fillStar
//調(diào)用對(duì)象的原型，對(duì)這個(gè)原型進(jìn)行修改（函數(shù)當(dāng)做對(duì)象來處理）
CanvasRenderingContext2D.prototype.fillStar=function(r,R,x,y,rot){
this.beginPath();
for(var i=0;i<5;i++){
this.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
this.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
}
this.closePath();
this.fill();
}
window.onload=function(){
canvas.width=800;
canvas.height=800;
context.fillStyle="#058";
context.fillStar(150,300,400,400,0);
}
</script>
