canvasAPI，通俗的canvas基础知识（一）

在没学 canvas 的时候，觉得canvas是这么的神秘，这么的绚丽，这么的高深，用canvas做出来的效果是如此的炫酷，能做的事情如此的宽广，简直让我心生敬畏之心，时常感叹：我要是得此技能，必定要上天了（注意，这里不是要升天啊），那时候一直不敢涉猎的原因主要是，第一，在还需要兼容IE的时代，兼容性是硬伤；第二，参考资料的如此的少，又或是参考资料五花八门，没有适合入门的比较好的参考文章，第三，canvas之所以能无所不能，其最大的原因是有一个好伙伴JavaScript，那是的JavaScript还是不甚了解。（借口真多）现在好了，终于有时间，有精力来研究研究这神秘莫测的canvas，考虑到现在适合入门的canvas基础知识点的文字少之又少，于是，决定在接下来的一段时间里，将canvas的API梳理一遍，毕竟工欲善其事，必先利其器嘛，废话不多说，咱们就开始吧！
注：以下API中的各个属性和方法都是目前支持的，不完全支持的就没有介绍了！
初识canvas
要学习canvas，必先知道canvas为何物？

<canvas></canvas>
<span>你是什么类型的标签？</span> 

在它后面加一个内联样式的标签，看看它是什么类型的标签span到它的右侧去了，说明它是一个行内元素，好了，基本情况我们算了解了，那我们怎么修改它的默认样式呢？
首先，canvas作为一个html5比较特殊的标签，也是支持样式控制的，比如设置边框，边距，背景等等，但是有一个地方值得注意的是，在设置canvas宽高时，如果用style样式来设置的话，会出现一点小问题，具体什么问题，暂且卖个关子，后面为大家介绍，所以宽高还是在标签上设置比较好

<canvas width="400" height="400" id="canvas"></canvas> 

当然，canvas目前只是一个画板而已，没有画笔，你什么也做不了，那画笔是什么呢，这里就是我们主角的开始了

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");     //目前只有2d，没有3d，以后会有的，如果想了解3d，可以看一下webGL 

getContext("2d")是canvas的绘图环境，只有引入它才能进行绘图
有时我在想，canvas绘图都是在js里面完成的，那么它本身的标签能不能写东西呢，比如，如果在它里面放一张图片，嘻嘻，会怎么样，那我们说干就干

<canvas width="400" height="400" id="canvas">
        <img src="1.jpg" width="400" height="400" alt="">
</canvas> 

当当当当，见证奇迹！马丹，标准浏览器下，什么都没有，看看不争气的IE，亮瞎眼，活脱脱一个大美女出现了由此可见，在支持canvas的浏览器，canvas里面的东西是不会显示的，但是在不支持的情况下，会赤裸裸的显示出来，于是，我们可以把它作为提示用语，用来告诉不支持的浏览器，该换换了

<canvas width="400" height="400" id="canvas">
        <span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
</canvas> 

恩，对于IE家族的低版本成员，年纪太大，只能这么处理了，如果你非要支持IE，可以试试explorercanvas开源项目，里面有一个excanvas.js，当然，在使用的时候注明是在ie下引用，地址我就没给了，我也没打算去研究它，因为我断定，不久的将来，IE8以下浏览器就不见了，呵呵，但愿它快点到来！
前面都是聊骚，正在的主角才刚开始，任务艰巨，任重而道远啊，canvas API分为属性部分和方法部分，但是我不想这么来讲，这样太机械了，看不懂的人依旧是看不懂，接下来的API我会采用相关属性，方法交叉讲解，再辅以小实例，相信这样更让人看得懂，而且会印象深刻，想想还有点小激动呢，API较长，只能分几期来讲了！
由于canvas默认背景为透明色，为区别画布与body，以后的画布样式统一设置为如下：

body{ background:#ccc;}
canvas{ background:#fff;} 

画画嘛，都是从点，线，圆，框开始的，那我们就从点开始吧！
MoveTo(x,y) 顾名思义，就是移动到某个坐标点上，x,y 分别表示x轴坐标和y轴坐标

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.moveTo(100,100); 

当然是不会有任何的效果的，因为这里的意思就相当于把笔移动了100,100的位置，还没有下笔呢，这并不是然并卵，这个是画笔作画的起点，比如画直线，2点一线，只需再做一点就可以画直线了
lineTo(x,y) 意思是连接最后一点的坐标，但是不画，x,y 分别表示x轴坐标和y轴坐标

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.moveTo(100,100);
ctx.lineTo(200,200); 

然而并没有任何效果，这是为什么呢，实际上，上面只是标注了直线的起点和终点，还没添墨水呢，何为墨水呢？
下面就来介绍我们的黑白双煞：
fill() 填充，此为实心的
stroke() 绘制，此为空心的
因为线条的宽度只有一个像素，所以无法进行填充，于是画线段用fill()方法是没有用的，

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.stroke(); 

结果：此黑白双煞在以后的绘图中起到核心作用，切记这2个方法（为什么我叫它们黑白双煞呢，因为canvas默认颜色为黑色，fill（）填充颜色为一坨黑，stroke（）绘制就像描边一样，一个框，里面是透明的，由此得名，哈哈，方便记忆）。
点，线之后便是面了，我们来绘制矩形吧，矩形也有三兄弟，暂且命名为阮氏三兄弟：
rect(x,y,w,h) 在x,y坐标点绘制一个矩形，宽高为w,h，此方法只是绘制路径，必须用黑白双煞才能显示
fillRect(x,y,w,h) 在x,y坐标点绘制一个填充矩形，宽高为w,h
strokeRect(x,y,w,h) 在x,y坐标点绘制一个描边矩形，宽高为w,h
分别看看它们的表现

//不用黑白双煞
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.rect(5.5,5.5,100,100); 

//用stroke
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.rect(5.5,5.5,100,100)
ctx.stroke(); 

//用fill
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.rect(5.5,5.5,100,100)
ctx.fill(); 

//用strokeRect
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(5.5,5.5,100,100); 

//用fillRect
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(5.5,5.5,100,100); 

//为省篇幅，我合起来写了，你想看到各自的效果，请分开运行
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillText('你想对我说什么',50,50);
ctx.strokeText('你想对我说什么',50,50); 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillText('你想对我说什么',0,0); 

//为了让bottom看得到，我将文字向下偏移20像素
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="20px Arial";
ctx.textBaseline = "bottom";
ctx.fillText('你想对我说什么',0,20); 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="italic bold 40px 微软雅黑 ";
ctx.textBaseline = "top";
ctx.fillStyle = 'red';
ctx.fillText('a你想对我说什么',0,20); 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="40px Arial";
ctx.textBaseline = "top";
ctx.textAlign = 'left';
ctx.fillStyle = 'red';
ctx.fillText('你想对我说什么',0,20);
ctx.strokeStyle = 'green';
ctx.strokeText('你想对我说什么',0,60); 

效果：如图所示，描边文字并不是加粗的，而是对文字进行描边了，文字小时，就挤到一起了。
我们都知道，css3有一个新样式 -- text-shadow，表示文字的阴影，canvas也有类似的功能，咱们就来对比一下吧！
shadowOffsetX 阴影距形状的水平距离
shadowOffsetY 阴影距形状的垂直距离
shadowBlur 阴影的模糊级别，这里是高斯模糊，默认值为0
shadowColor 阴影的颜色
其实这个跟css3的阴影设置很相似，我就一起来看一下吧
html：

<canvas width="300" height="200" id="canvas">
        <span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
</canvas>
<span>你想对我说什么</span> 

css:

body{ background:#ccc;}
canvas{ background:#fff;}
span{ font-size:40px; font-family:Arial; color:red; text-shadow:5px 5px 5px #000; vertical-align: top; display:inline-block;} 

js:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="40px Arial";
ctx.textBaseline = "top";
ctx.textAlign = 'left';
ctx.fillStyle = 'red';
        
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.shadowColor = '#000';
        
ctx.fillText('你想对我说什么',0,20);
ctx.strokeStyle = 'green';
ctx.strokeText('你想对我说什么',0,60); 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="24px 微软雅黑";
ctx.fillStyle = 'red';
var txt = "快告诉我们我自己有多宽";
var w = ctx.measureText(txt).width;
ctx.fillText('你的宽度：'+w,0,50);
ctx.fillText(txt,0,100); 

以上就是canvas API ，通俗的canvas基础知识（一） 的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

-->

相关文章：

canvas API 介绍，常见的canvas基础知识（二）

canvas API 介绍，常见的canvas基础知识（三）

canvas API 介绍，常见的canvas基础知识（四）

查看更多关于canvasAPI，通俗的canvas基础知识（一）的详细内容...