canvas是一个H5的标签：
<canvas> </canvas>
canvas本身没有任何的绘图能力，所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas（这意味着咱得给canvas设个id）：
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas"); //获取要操作的canvas
//操作canvas的代码...
</script>
注意最好在一开始的时候就给canvas设置好其宽高（若不设定宽高，浏览器会默认设置canvas大小为宽300、高100像素），而且不能使用css来设置（会被拉伸），建议直接写于canvas标签内部：
<canvas id="myCanvas" width="200" height="200"></canvas>
也可以在js脚本中设置：
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas");
c.width=200;
c.height=200;
</script>
关于canvas大小需要知道的一点是，后续咱们对canvas所做的全部绘图操作，超出此大小范围的部分是不可见的。
接着在聊如何在canvas上绘图前，咱得先说说.getContext(“2d”)这东西。
.getContext() 是canvas的绘图对象/方法，要让canvas执行绘图工作必须先获取canvas的.getContext()对象来执行。
.getContext()只接受一个参数，该参数用于获取canvas的绘图环境，例如.getContext(“2d”)表示该canvas的绘图环境为2D平面（可以绘制文本、直线、弧线、矩形、圆形等）。当前H5只支持2D环境，在不久的将来会开放3D绘图功能。（故咱可将“getContext”翻译为“获取绘图环境”）
先来个小例子，从最简单的绘制直线开始：
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(10,10); //定义绘画开始的位置
ctx.lineTo(150,50); //画一条直线，结束点坐标是x=150,y=50
ctx.stroke(); //描边
</script>
效果如下：
在这里我们使用了3个getContext(“2d”)对象的绘图方法：
.moveTo(x坐标 , y坐标) 可以理解为定位画笔在画布上的位置（注意所有绘图方法所定义的坐标是相对canvas而言的而不是浏览器窗口，对canvas来说，最左上角的点的坐标是(0,0)）
.lineTo(x坐标 , y坐标) 顾名思义，就是画一条直线到某个点，很好理解。需要知道的是此方法仅仅做路径运动，而不存在任何视觉上的绘图效果（上色、描边）
.stroke() 描边方法，有玩过AfterEffect的朋友会很清楚，不给运动路径加stroke特效的画是不存在描边效果的，canvas也一样，想要运动路径轨迹能有视觉效果，需要使用相应的上色/描边方法。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/10637.html
微信扫一扫 
支付宝扫一扫