绘图操作
canvas本身不具备画图能力，一切都通过js
兼容：ie9+ chrome FF
oC = document.querySelector('canvas);
获取画笔： var gd=oC.getContext('2d');
起始点: gd.moveTo(x,y)
连接到哪: gd.lineTo(x,y)
描边: gd.stroke();
描边颜色: gd.strokeStyle='rgba/rgb/#f00/red';
填充: gd.fill();
填充颜色: gd.fillStyle();
闭合路径 (自动连接到起始点): gd.closePath();
开始路径 (开始绘制一个新的图案，屏蔽之前 ): gd.beginPath();
画图基本流程
gd.beginPath();
画图
gd.closePath();
gd.storke();
矩形 : gd.strokeRect(x,y,w,h);
矩形填充:gd.fillStyle
圆: gd.arc(cx,cy,r,起始角度,结束角度,是否逆时针);
画文字: gd.strokeText(文字,x,y);
水平居中:gd.textAlign='center/left/right';
垂直居中:gd.textBaseline='middle/top/bottom';
获取文字宽度:gd.measureText(str).width
清除画布：gd.clearRect(0,0,oC.width,oC.height);
端点样子
gd.lineCap='round';
butt 默认值
round 圆
square 方
连接点的样子
gd.lineJoin='bevel';
bevel 斜切
round 圆
miter 默认值
事件
需要模拟 if(ev.clientX>x&&ev.clientX<x+w&&ev.clientY>y&&ev.clientY<y+h){}
阴影：
gd.shadowOffsetX=10; x
gd.shadowOffsetY=10; y
gd.shadowColor='red'; color
gd.shadowBlur=2; 模糊度
渐变
gd.createLinearGradient(x1,y1,x2,y2);
linear.addColorStop(位置,颜色);
径向渐变
gd.createRadialGradient(x1,y1,r1,x2,y2,r2);
平铺背景
gd.createPattern(oImg,'no-repeat');
gd.drawImage(oImg,200,100);
导出图片
oC.toDataURL('image/gif');
画图片
完美用法 ：
gd.drawImage(img,
sx,sy,swidth,sheight,
x,y,width,height
);
draw.png
像素级操作
var result=gd.getImageData(0,0,oC.width,oC.height);
var d=result.data;
gd.putImageData(result,0,0);
简易的画图板:
var oC = document.querySelector('canvas');
var gd = oC.getContext('2d');
oC.onmousedown = function(ev){
gd.beginPath();
gd.moveTo(ev.clientX,ev.clientY);
oC.onmousemove = function(ev){
gd.lineTo(ev.clientX,ev.clientY);
gd.stroke();
}
oC.onmouseup = function(){
oC.onmousemove = null;
oC.onmouseup = null;
}
return false;
}
简易柱状图：
function rnd(n,m){
return Math.floor(Math.random()*(m-n)+n);
}
window.onload=function (){
var oC=document.querySelector('canvas');
var gd=oC.getContext('2d');
var arr=[300,200,50,80,150,900]; //模拟后台数据
var iMax=Math.max.apply(null,arr); //找到数组中最大的
//求出每个柱子的高度
var aHeight=[];
for(var i=0; i<arr.length; i++){
aHeight[i]=arr[i]/iMax*oC.height;
}
//画柱子
var w=50;
for(var i=0; i<aHeight.length; i++){
gd.beginPath();
gd.fillStyle='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
gd.fillRect(i*w*2,oC.height-aHeight[i],w,aHeight[i]);
}
};
简易饼状图：
function rnd(n,m){
return Math.floor(Math.random()*(m-n)+n);
}
function d2a(n){//度数转弧度
return n*Math.PI/180;
}
window.onload = function(){
var oC = document.querySelector('canvas');
var gd = oC.getContext('2d');
var arr = [3,5,7,8,4];//模拟后天数据
var sum = 0; //总数量
for(var i = 0;i < arr.length;i++){
sum += arr[i];
}
var aDeg = [];//每一项所占的度数
for(var i = 0;i < arr.length;i++){
aDeg[i] = arr[i]/sum*360;
}
//画圆
function drawPie(start,end){
gd.beginPath();
gd.fillStyle='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
gd.moveTo(200,200);
gd.arc(200,200,100,d2a(start),d2a(end),false);
gd.fill();
}
var d=0;
for(var i = 0;i < aDeg.length;i++){
console.log(d);
drawPie(d,d+aDeg[i]);
d += aDeg[i];
}
}
运动（开定时器，改变left top ）
var oC=document.querySelector('canvas');
var gd=oC.getContext('2d');
var x=100;
setInterval(function (){
gd.clearRect(0,0,oC.width,oC.height);
gd.strokeRect(x++,100,100,100);
},30);
导出图片
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<style>
body{ background:#000; }
canvas{ background:#fff; }
</style>
<script>
function d2a(n){
return n*Math.PI/180;
}
window.onload=function(){
var oC=document.querySelector('canvas');
var gd=oC.getContext('2d'); //画笔
var linear=gd.createLinearGradient(-300,-300,300,200);
linear.addColorStop(0,'red');
linear.addColorStop(1,'yellow');
gd.strokeStyle=linear;
var d=0;
setInterval(function(){
gd.save();
gd.translate(200,150);
gd.rotate(d2a(d++));
gd.strokeRect(-100,-50,200,100);
gd.restore();
},16);
//导出图片
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
var res=oC.toDataURL('image/gif');
var oImg=new Image();
oImg.src=res;
document.body.appendChild(oImg);
};
};
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1" />
<canvas width="400" height="300"></canvas>
</body>
</html>
平铺图片：
var oC=document.querySelector('canvas');
var gd=oC.getContext('2d'); //画笔
var oImg=new Image();
var n=0;
oImg.onload=function (){
setInterval(function (){
gd.clearRect(0,0,oC.width,oC.height);
gd.drawImage(oImg,
0,n*60,60,60, //截取图片
100,100,120,120//改变图片位置和大小
);
n++;
if(n==10){
n=0;
}
},30);
};
oImg.src='coinAni2.png';
图片阴影：
var oC=document.querySelector('canvas');
var gd=oC.getContext('2d');
gd.shadowOffsetX=10;
gd.shadowOffsetY=10;
gd.shadowColor='red';
gd.shadowBlur=2;
gd.font='100px a';
gd.strokeText('前端开发',200,200);
径向渐变
function d2a(n){
return n*Math.PI/180;
}
window.onload=function (){
var oC=document.querySelector('canvas');
var gd=oC.getContext('2d');
var linear=gd.createRadialGradient(400,400,340,400,400,200);
linear.addColorStop(0,'#f00');
linear.addColorStop(0.1,'orange');
linear.addColorStop(0.3,'yellow');
linear.addColorStop(0.5,'green');
linear.addColorStop(0.8,'blue');
linear.addColorStop(0.9,'purple');
linear.addColorStop(1,'#fff');
gd.fillStyle=linear;
gd.lineWidth=100;
gd.arc(400,400,340,d2a(-180),d2a(0),false);
gd.fill();
};
像素级操作
function testPixel(){
var canvas = document.getElementById('lesson01');
var c = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
//draw the image to the canvas
c.drawImage(img,0,0);
//get the canvas data
var data = c.getImageData(0,0,canvas.width,canvas.height);
//invert each pixel
for(n=0; n<data.width*data.height; n++) {
var index = n*4;
data.data[index] = 255-data.data[index];
data.data[index+1] = 255-data.data[index];
data.data[index+2] = 255-data.data[index];
//don't touch the alpha
}
//set the data back
c.putImageData(data,0,0);
}
img.src = "Penguins.png";
}
