內(nèi)容整理自網(wǎng)上！
CanvasRenderingContext2D參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fillRect
一、繪制圖
代碼：
<script>
var CANVAS_WIDTH=500;
var CANVAS_HEIGHT=500;
var canvas,context;
window.onload=function () {
createCanvas();
drawRect();
}
function createCanvas() {
document.body.innerHTML="<canvas id='canvas' width='"+CANVAS_WIDTH+"' height='"+CANVAS_HEIGHT+"'></canvas>";
canvas=document.getElementById('canvas');
context=canvas.getContext('2d');
}
function drawRect() {
//填充顏色
context.fillStyle='#4169e1';
//context.rotate(45);//角度
//context.translate(200,200);//移動
//context.scale(2,0.5);//縮放
//繪制填充矩形，矩形的起點在 (x, y) 位置，矩形的尺寸是 width 和 height
context.fillRect(0,0,100,100);
}
</script>
二、繪制圖片
代碼：
function drawImage() {
var img=new Image();
img.onload=function () {
context.drawImage(img,0,0);
}
img.src='resource/ok.jpg';
}
三、繪制圓
效果圖：
好多圓
代碼：
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null){
return false;
}
var context=canvas.getContext('2d');
context.fillStyle="#eeeeef";
context.fillRect(0,0,300,400);
for(var i=0;i<10;i++){
context.beginPath();
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
//參數(shù)分別為x軸坐標、y軸坐標、圓的半徑、圓弧的起始點（x軸方向開始計算）、圓弧終點、true為逆時針繪制，false為順時針繪制
context.closePath();//一定要關(guān)閉路徑?。? context.fillStyle="rgba(255,0,0,0.25)";//0.25是透明度
context.fill();
}
}
四、繪制漸變圖形
效果圖：
漸變圖
代碼：
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null){
return false;
}
var context=canvas.getContext('2d');
var g1=context.createLinearGradient(0,0,0,300);
//參數(shù)起點的x軸坐標、起點y軸坐標、終點的x軸坐標、終點的y軸坐標
g1.addColorStop(0,'rosybrown');
g1.addColorStop(1,'white');
context.fillStyle=g1;
context.fillRect(0,0,500,500);
}
效果圖：
漸變圖形
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null){
return false;
}
var context=canvas.getContext('2d');
var g1=context.createLinearGradient(0,0,0,300);
//參數(shù)起點的x軸坐標、起點y軸坐標、終點的x軸坐標、終點的y軸坐標
g1.addColorStop(0,'rosybrown');
g1.addColorStop(1,'white');
context.fillStyle=g1;
context.fillRect(0,0,500,500);
var g2=context.createLinearGradient(0,0,300,0);
g2.addColorStop(0,'rgba(0,0,255,0.5)');
g2.addColorStop(1,'rgba(255,0,0,0.5)');
for(var i=0;i<10;i++){
context.beginPath();
context.fillStyle=g2;
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
效果圖：
五角星+陰影效果
代碼：
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null){
return false;
}
var context=canvas.getContext('2d');
context.fillStyle='#eeeeef';
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.shadowColor='rgba(100,100,100,0.5)';
context.shadowBlur=7.5;
context.translate(0,50);
for(var i=0;i<3;i++){
context.translate(50,50);
create5Star(context);
context.fill();
}
}
function create5Star(context) {
var n=0;
var dx=100;
var dy=0;
var s=50;
context.beginPath();
context.fillStyle='rgba(255,0,0,0.5)';
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/5*4;
for(var i=0;i<5;i++){
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
五、使用庫繪制
下載庫（github源碼）：https://createjs.com/downloads
說明文檔：\EaselJS-master\docs\EaselJS_docs里面的index.html
引入文件：\EaselJS-master\lib\easeljs.min.js
繪制文本
代碼：
<canvas id="canvas" width="500px" height="500px"></canvas>
<script>
var canvas;
var stage;
var txt;
window.onload = function(){
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
txt=new createjs.Text("number->","20px Arial","rosybrown");//文字、大小字體、顏色
stage.addChild(txt);
stage.update();
}
</script>
動態(tài)圖實現(xiàn)效果：
動態(tài)圖
代碼：
<canvas id="canvas" width="500px" height="500px"></canvas>
<script>
var canvas;
var stage;
var txt;
var count=0;
window.onload = function(){
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
txt=new createjs.Text("number->0","20px Arial","rosybrown");//文字、大小字體、顏色
stage.addChild(txt);
createjs.Ticker.setFPS(30);//頁面每秒顯示30幀
createjs.Ticker.addEventListener('tick',tick);
}
function tick(e) {
count++;
txt.text="number->"+count;
stage.update();
}
</script>
更酷炫的可以參考\EaselJS-master\examples！
實現(xiàn)效果：
酷炫效果
代碼：
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script>
var canvas;
var stage;
var img=new Image();
var sprite;
window.onload = function(){
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
stage.addEventListener('stagemousedown',clickCanvas);
stage.addEventListener('stagemousemove',moveCanvas);
var data={
images:['resource/spritesheet_sparkle.png'],
frames:{width:20,height:20,regX:10,regY:10}
}
sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
createjs.Ticker.setFPS(20);
createjs.Ticker.addEventListener("tick",tick);
}
function tick(e){
var t = stage.getNumChildren();
for(var i = t-1;i>0;i--){
var s = stage.getChildAt(i);
s.vY +=2;
s.vX +=1;
s.x += s.vX;
s.y += s.vY;
s.scaleX = s.scaleY =s.scaleX+ s.vS;
s.alpha += s.vA;
if(s.alpha <= 0 || s.y >canvas.height){
stage.removeChildAt(i);
}
}
stage.update(e);
}
function clickCanvas(e){
addS(Math.random()*200 + 100,stage.mouseX,stage.mouseY,2);
}
function moveCanvas(e){
addS(Math.random()*2 + 1,stage.mouseX,stage.mouseY,1);
}
function addS(count,x,y,speed) {
for(var i=0;i<count;i++){
var s=sprite.clone();
s.x=x;
s.y=y;
s.alpha=Math.random()*0.5+0.5; //透明度的變化
s.scale=s.scaleY=Math.random()+0.3; //縮放的效果
var a=Math.PI*2*Math.random();
var v=(Math.random()-0.5)*30*speed;
s.vX=Math.cos(a)*v;
s.vY=Math.sin(a)*v;
s.vS=(Math.random()-0.5)*0.2; //scale的變化
s.vA=-Math.random()*0.05-0.01;//alpha的變化
stage.addChild(s);
}
}
</script>
</body>
