H5学习之路之初识canvas，了解下？
好吧，其实一直想写关于canvas的博文，但是奈何一直觉得看不太明白，总感觉是不是少了点什么，今天先粗略的介绍一下canvas-画布，写的哪里有问题的希望可以提出来，一起学习！
我们今天就简单的做个效果：
我们今天简单说一下怎么在画布上画一些东西。
做上面的这个首先我们明确一下步骤：
1、画布
2、画网格（下面我会说为什么画网格）
3、（根据坐标）插图片
4、插入视频
ok，我们就这几个步分别介绍一下。
1、画布
<canvas id="mysecondcanvas" width="400" height="400"></canvas>
申请画布肯定是用到我们今天的主角：canvas
为了可以看出来大小，我们写一个css
<style type="text/css">
body{text-align: center;}
canvas{border: 10px dotted #000000;background-color: #9D9D9D;color: #C7254E;}
</style>那么这个时候的效果是：
一个画布就好了
2、画网格
为什么要画网格呢？其实用过这个都知道，里面很多的效果实现都是通过坐标来实现定位的，那么我们一般的话定坐标最好的办法就是有一个类似网格的坐标轴，这样可以直接看到我们需要的坐标。
PS：那么这里需要明确的一点就是，画布本身是不具备绘画的功能的，那么它其实只是一个容器，想要完成绘画的功能，是需要js实现的
var second = document.getElementById("mysecondcanvas");//第一步，拿到画布的元素
var cs = second.getContext("2d");//第二步，用getcontest方法准备画
for(var i =0;i<=400;i=i+40){//用for循环来绘制每一条横线和竖线
cs.moveTo(0,i);//起始点的坐标
cs.lineTo(400,i);//终点的坐标
cs.moveTo(i,0);
cs.lineTo(i,400);
}
cs.stroke();//执行连接两点直线的方法效果是这样的：
3、引用图片
<img src="images/58c9f7df95cd9.jpg" id="images" alt="pictures" width="400px" height="400px" style="display: none;"/>imag.onload = function(){
cs.drawImage(imag,0,0,40,40);//参数分别是起点坐标X，Y后面是宽度和高度
cs.drawImage(imag,40,40,120,120);
cs.drawImage(imag,160,160,240,240);
}这个时候的效果是这样的：
4、引入视频
这里用到的是一个H5的新的属性：video
用法也是很简单的：
<video src="video/mov_bbb.ogg" controls="controls" id="videos" autoplay="autoplay" style="display: none;"loop="loop"></video>
上面的属性呢其实我在之前的博客里面也是写过的，这里就不做赘述了。
将文件新加到画布里面：
vie.addEventListener('play', function() {var i=window.setInterval(function() {cs.drawImage(vie,0,200,400,200)},10);},false);
效果就是这样的：
ok到这里基本就做好了，完整的代码是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{text-align: center;}
canvas{border: 10px dotted #000000;background-color: #9D9D9D;color: #C7254E;}
</style>
</head>
<body>
<!--网格-->
<canvas id="mysecondcanvas" width="400" height="400"></canvas>
<!--图片引用-->
<img src="images/58c9f7df95cd9.jpg" id="images" alt="pictures" width="400px" height="400px" style="display: none;"/>
<!--视频引用-->
<video src="video/mov_bbb.ogg" controls="controls" id="videos" autoplay="autoplay" style="display: none;"loop="loop"></video>
</body>
<script type="text/javascript">
var second = document.getElementById("mysecondcanvas");
var cs = second.getContext("2d");
var imag = document.getElementById("images");
var vie = document.getElementById("videos");
for(var i =0;i<=400;i=i+40){
cs.moveTo(0,i);
cs.lineTo(400,i);
cs.moveTo(i,0);
cs.lineTo(i,400);
}
cs.stroke();
imag.onload = function(){
cs.drawImage(imag,0,0,40,40);//参数分别是起点坐标X，Y后面是宽度和高度
cs.drawImage(imag,40,40,120,120);
/*cs.drawImage(imag,160,160,240,240);*/
/*cs.drawImage(vie,0,200,400,200);*/
}
vie.addEventListener('play', function() {var i=window.setInterval(function() {cs.drawImage(vie,0,200,400,200)},10);},false);
</script>
</html>这里需要注意的几个点是怎么开始使用：
var second = document.getElementById("mysecondcanvas");//拿到画布元素
var cs = second.getContext("2d");//使用2D绘制其实这个是由很多的方法的，我们这里不一一的介绍了，简单的用W3cSchool的笔记总结一下：
颜色、样式和阴影
属性 | 描述 |
|---|---|
fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式。 |
strokeStyle | 设置或返回用于笔触的颜色、渐变或模式。 |
shadowColor | 设置或返回用于阴影的颜色。 |
shadowBlur | 设置或返回用于阴影的模糊级别。 |
shadowOffsetX | 设置或返回阴影与形状的水平距离。 |
shadowOffsetY | 设置或返回阴影与形状的垂直距离。 |
方法 | 描述 |
|---|---|
createLinearGradient() | 创建线性渐变（用在画布内容上）。 |
createPattern() | 在指定的方向上重复指定的元素。 |
createRadialGradient() | 创建放射状/环形的渐变（用在画布内容上）。 |
addColorStop() | 规定渐变对象中的颜色和停止位置。 |
线条样式
属性 | 描述 |
|---|---|
lineCap | 设置或返回线条的结束端点样式。 |
lineJoin | 设置或返回两条线相交时，所创建的拐角类型。 |
lineWidth | 设置或返回当前的线条宽度。 |
miterLimit | 设置或返回最大斜接长度。 |
矩形
方法 | 描述 |
|---|---|
rect() | 创建矩形。 |
fillRect() | 绘制"被填充"的矩形。 |
strokeRect() | 绘制矩形（无填充）。 |
clearRect() | 在给定的矩形内清除指定的像素。 |
路径
方法 | 描述 |
|---|---|
fill() | 填充当前绘图（路径）。 |
stroke() | 绘制已定义的路径。 |
beginPath() | 起始一条路径，或重置当前路径。 |
moveTo() | 把路径移动到画布中的指定点，不创建线条。 |
closePath() | 创建从当前点回到起始点的路径。 |
lineTo() | 添加一个新点，然后在画布中创建从该点到最后指定点的线条。 |
clip() | 从原始画布剪切任意形状和尺寸的区域。 |
quadraticCurveTo() | 创建二次贝塞尔曲线。 |
bezierCurveTo() | 创建三次贝塞尔曲线。 |
arc() | 创建弧/曲线（用于创建圆形或部分圆）。 |
arcTo() | 创建两切线之间的弧/曲线。 |
isPointInPath() | 如果指定的点位于当前路径中，则返回 true，否则返回 false。 |
转换
方法 | 描述 |
|---|---|
scale() | 缩放当前绘图至更大或更小。 |
rotate() | 旋转当前绘图。 |
translate() | 重新映射画布上的 (0,0) 位置。 |
transform() | 替换绘图的当前转换矩阵。 |
setTransform() | 将当前转换重置为单位矩阵。然后运行 transform()。 |
文本
属性 | 描述 |
|---|---|
font | 设置或返回文本内容的当前字体属性。 |
textAlign | 设置或返回文本内容的当前对齐方式。 |
textBaseline | 设置或返回在绘制文本时使用的当前文本基线。 |
方法 | 描述 |
|---|---|
fillText() | 在画布上绘制"被填充的"文本。 |
strokeText() | 在画布上绘制文本（无填充）。 |
measureText() | 返回包含指定文本宽度的对象。 |
图像绘制
方法 | 描述 |
|---|---|
drawImage() | 向画布上绘制图像、画布或视频。 |
像素操作
属性 | 描述 |
|---|---|
width | 返回 ImageData 对象的宽度。 |
height | 返回 ImageData 对象的高度。 |
data | 返回一个对象，其包含指定的 ImageData 对象的图像数据。 |
方法 | 描述 |
|---|---|
createImageData() | 创建新的、空白的 ImageData 对象。 |
getImageData() | 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。 |
putImageData() | 把图像数据（从指定的 ImageData 对象）放回画布上。 |
合成
属性 | 描述 |
|---|---|
globalAlpha | 设置或返回绘图的当前 alpha 或透明值。 |
globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上。 |
其他
方法 | 描述 |
|---|---|
save() | 保存当前环境的状态。 |
restore() | 返回之前保存过的路径状态和属性。 |
createEvent() | 创建新的 Event 对象 |
getContext() | 获得用于在画布上绘图的对象 |
toDataURL() | 导出在 canvas 元素上绘制的图像 |
腾讯云开发者
