最近看了一本canvas的书，里面对canvas的一些基本知识讲的很详细。相比于一个div加点颜色，我臭屁的觉得使用canvas画长方形正方形圆形之类的是大才小用。
下面我放几个canvas还不错的功能点，感觉还行。
图
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function $$(id){
return document.getElementById(id);
}
window.onload=function(){
var cnv=$$("canvas");
var cxt=cnv.getContext("2d");
cxt.globalCompositeOperation="xor";
cxt.fillStyle="red";
cxt.fillRect(30,30,60,60);
cxt.beginPath();
cxt.arc(100,100,40,0,Math.PI*2,true);
cxt.closePath();
cxt.fillStyle="LightSkyBlue";
cxt.fill();
cxt.fillStyle="red";
cxt.fillRect(110,30,60,60);
cxt.fillStyle="red";
cxt.fillRect(30,110,60,60);
cxt.fillStyle="red";
cxt.fillRect(110,110,60,60);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="250" style="border:1px dashed gray;"></canvas>
</body>
</html>
图
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script>
function $$(id){
return document.getElementById(id);
}
window.onload=function(){
var cnv=$$("canvas");
var cxt=cnv.getContext("2d");
var text="点击存图片";
cxt.font="bold 60px 微软雅黑";
cxt.shadowOffsetX=5;
cxt.shadowOffsetY=5;
cxt.shadowColor="#66CCFF";
cxt.shadowBlur=10;
cxt.fillStyle="#FF6699";
cxt.fillText(text,10,90);
$$("btn").onclick=function(){
window.location=cnv.toDataURL("image/png");
}
}
</script>
<canvas id="canvas" width="320" height="150" style="border:1px dashed gray"></canvas>
<br/>
<input id="btn" type="button" value="保存图片"/>
</body>
</html>
当然还有canvas的边界问题等等。
by本文看书自web前端开发精品课HTML5Canvas开发详解。
by我用canvas很少，觉得就是几个API调用的问题。理解非常狭隘，求你们拍砖。