canvas基础学习笔记（完）
2017-05-04 本文已影响215人
开心糖果的夏天
canvas之旅仍在继续——
html5的API一直在持续进化，相应的，Canvas作为html5的一个重头戏，它的标准也一直在更新。
W3C维护的标准：https://www.w3.org/TR/2dcontext/
WHATWG维护的标准：https://html.spec.whatwg.org/
一、在canvas中使用其他html元素
效果图.jpg
注：其他其他html元素不能放在canvas标签中间
下面的例子可以实现控件与canvas交互，点击绿色按钮停止或开始运动，点击白色按钮canvas画布为白色，点击黑色按钮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标签中间 2.canvas本身不是透明的，它默认的背景色是白色的-->
当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
<div id="controller">
<h1>canvas绘图之旅</h1>
<a href="#" id="canvas-btn">停止运动</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;//设置小球是否运动
var themeColor="white";//控制画面背景色
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=1200;
canvas.height=800;
var context=canvas.getContext('2d');
//画出100个圆
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;
}
//实现动画
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="开始运动";
}
else{
isMoving=true;
this.text="停止运动";
}
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";//设置遮挡效果
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时绘制椭圆
if(context.ellipse){
context.beginPath();
context.ellipse(400,400,300,200,0,0,Math.PI*2);
context.stroke();
}
else{
alert("no ellipse");
}
}
</script>
三、扩展canvas的context
示例代码如下：
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//********************************************设计属于自己的API
//在context中加入新的方法，方法名为fillStar
//调用对象的原型，对这个原型进行修改（函数当做对象来处理）
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>
