CanvasAPI是不是很牛逼？其实就是能在网页上画画的小工具，用Javascript就能控制它，随时随地画图，还有各种神奇功能！但是如果你的浏览器老旧或者不兼容，它就会提示“你的浏览器不支持canvas了”。这不就让人郁闷吗？尽管科技发展飞快，但仍有不足之处。
您的浏览器不支持canvas！
Canvas的基本概念
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
}
Canvas就是网上画图用的小工具，想怎么画都行，就像是在纸上创作。要用哪个图形？那得看getContext方法它会告诉咱们是画2D的还是3D的。选2D的话，挺像平面设计；要是选3D的话，那可得学下WebGLAPI了。
Canvas2D绘图牛得很！只需要简单地使用beginPath、moveTo和lineTo来确定线条的开始和结束位置，再用stroke加色彩，瞬间画出美丽的画作。想要画个封闭型？别急，有closePath，它会自动帮你画回起点，省心省力。
ctx.beginPath(); // 开始路径绘制 ctx.moveTo(20, 20); // 设置路径起点，坐标为(20,20) ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线 ctx.lineWidth = 1.0; // 设置线宽 ctx.strokeStyle = '#CC0000'; // 设置线的颜色 ctx.stroke(); // 进行线的着色，这时整条线才变得可见
绘制文本和渐变
ctx.fillStyle = 'yellow'; ctx.fillRect(50, 50, 200, 100);
ctx.strokeRect(10,10,200,100);
canvas上涂鸦，是不是很简单？只需用fillText方法，输入内容和起点，文字就出来了。要是想要点新意？那就试试调整坐标值，可以做成向下或向右的渐变效果，让你的作品更炫酷！
ctx.clearRect(100,50,50,50);
Canvas的渐变功能很好玩！调整下颜色和位置，就能实现不同颜色间的流畅过渡了。不仅让画面更漂亮，还能在设计中帮助我们更好地传递信息或聚焦重点~
图像的插入与处理
ctx.font = "Bold 20px Arial"; // 设置字体
ctx.textAlign = "left";// 设置对齐方式
ctx.fillStyle = "#008600"; // 设置填充颜色
ctx.fillText("Hello!", 10, 50); // 设置字体内容，以及在画布上的位置
ctx.strokeText("Hello!", 10, 100); // 绘制空心字
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
CanvasAPI也可以放图片到画布！怎么操作？首先得看懂你想要导入的图像，然后用drawImage把它重绘到画布上去。这个函数需要提供三个参数：就是你想展示的那张图所在的DOM元素，以及这张图在画布上的坐标轴（左上角）。这样一来，你就可以随心所欲地调整图片的大小和位置了，做出各种酷炫的效果！
ctx.beginPath(); ctx.arc(60, 60, 50, 0, Math.PI*2, true); ctx.fillStyle = "#000000"; ctx.fill();
Canvas这个东西太牛逼了！他可以把图片里的每一个像素都读出来，变成一个数组。不仅能读出，还能修改，想怎么动就怎么动，改好了再用putImageData放回去，一下子就能让游戏画面变得特别炫目，跟PS上的特效似的。
ctx.beginPath(); ctx.arc(60, 60, 50, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.stroke();
保存和恢复设置
var myGradient = ctx.createLinearGradient(0, 0, 0, 160); myGradient.addColorStop(0, "#BABABA"); myGradient.addColorStop(1, "#636363");
想要在Canvas上画图时保持当前画布状态怎么办？跟电脑上的“另存为”一样简单，用save方法就能搞定！画完一部分后想恢复原状？别急，CanvasAPI里有个restore方法，轻松帮你搞定。比如，你先画了个带阴影的矩形，然后用restore恢复到之前状态，再画个不带阴影的矩形，是不是超方便？
动态效果的实现
ctx.fillStyle = myGradient; ctx.fillRect(10,10,200,100);
CanvasAPI还挺好玩的！图像和形状都能动，感觉就像真的在画布上走了。这是因为它们的位置在不停地变。比如，把矩形的x坐标增加，看起来它好像向右边移动了。这种动态感能让页面变得更加有意思，吸引更多人来看。
ctx.shadowOffsetX = 10; // 设置水平位移 ctx.shadowOffsetY = 10; // 设置垂直位移 ctx.shadowBlur = 5; // 设置模糊度 ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色 ctx.fillStyle = "#CC0000"; ctx.fillRect(10,10,200,100);
像素处理与滤镜应用
CanvasAPI像素操作特别流弊！搞点像素玩法，各种滤镜随便耍！比如搞个小程序，把每个Canvas像素都带上，就能实现模糊、清晰、变色等效果，让你的图片炫毙了！
var img = new Image(); img.src = 'image.png'; ctx.drawImage(img, 0, 0); // 设置对应的图像对象，以及它在画布上的位置
Canvas的应用场景
CanvasAPI挺好用的，能干好多事！像网页游戏，就能用它设计场景和任务，还可做超赞的动态图形；又如数据展示，利用它就能把数据变图表，看着更直观。
Canvas的未来发展
var image = new Image();
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext('2d').drawImage(image, 0, 0);
// 插入页面底部
document.body.appendChild(image);
return canvas;
}
image.src = 'image.png';
科技越来越牛！CanvasAPI自然也不赖。也许以后我们还可以做出更高级别的3D画作和更加惊艳的图片效果。这个API就特别强大，简直是互联网开发者们的创意源泉，让他们做出来的东西超炫的！
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
评论0