H5Canvas入门（上）（下）
前言
本系列教程是专门给设计师写的快速入门教程，只要一步步跟随本教程，即可轻松进入编程的世界。
学习成果
用canvas制作带有图案的封面。
a、了解HTML、CSS、JS基本的结构
b、<canvas>会写文字，更改颜色
c、<canvas>绘制图案
d、Browsersync的使用
手机截图
目录
1、需要准备什么？
2、HTML文件的基本骨架
3、Canvas的属性设置
4、script标签
1、需要准备什么？
只要有一台电脑就行！本教程推荐浏览器使用谷歌chrome浏览器，编程工具用最简单的、系统内置的文本编辑器就行。window系统用记事本，mac系统用文本编辑器。当然你也可以使用专门的代码编辑器，如Notepad++、Vim、SUBLIME TEXT等。
本文用mac自带的就可以了
2、HTML文件配置
用你的文本编辑器输入以下代码，并保存文件，文件保存位置任意目录都行，简单点，我们就放桌面上吧！比如我把文件命名为DesignCanvas.html 。
切记文件后缀html。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Example</title> </head> <body> <canvas id="canvas" width="600" height="300">Canvas not supported</canvas> <script type="text/javascript"> </script> </body> </html>
文本编辑器保存文件格式选为html
用Chrome浏览器打开我们保存的文件，并开启chrome浏览器开发者工具。
chrome浏览器开发者工具
准备工作做好了，浏览器打开文件后，显示的是一片空白，不要紧，我们将一步步实现。
3、HTML文件的基本骨架及Canvas的属性设置
在这里我们对各个标签进行解释，并修改其内容。
打开开发者工具里的Elements，可以看到我们刚在文本编辑器里输入的代码。
开发者工具里的Elements
- <title> 元素可定义文档的标题。浏览器通常把它放置在浏览器窗口的标题栏或状态栏上。我们可以直接在开发者工具的Elements里修改看看效果。
- <canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。canvas标签里的id为指定标签的唯一标识。我们可以叫“canvas”，也可以叫“designer”，也可以叫其他的。width及height为canvas的宽度和高度。位于<canvas></canvas>之间的内容表示当浏览器不支持canvas标签时所提示的内容。
我们可以给<canvas>标签增加style属性，右击<canvas>标签，选择Edit as HTML。
Edit as HTML
在<canvas>中输入style="border:1px red solid"
如下所示，
<canvas id="canvas" width="600" height="300" style="border:1px red solid">Canvas not supported</canvas>
1px为边框的宽度，可以试试其他值，red为颜色，也可以用十六进制来表示，如#24a5ca。solid为边框的线型类型，关于线型，大家可以参考下表，一个个尝试，并配合宽度、颜色调整。
值 | 描述 |
|---|---|
none | 定义无边框。 |
hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
上述的style内容，也可以在style选项下的element.style进行添加。
在element.style{ 处键入 border: 1px dashed;
用文本编辑器，打开Designcanvas.html文件
<script>标签，js代码在这里输入，我们输入以下代码
<script type="text/javascript"> var Mycanvas=document.getElementById('canvas'); var context=Mycanvas.getContext('2d'); context.font="38pt Arial"; context.fillStyle="black"; context.strokeStyle="blue"; context.fillText('Landscape Design',Mycanvas.width/2-150,Mycanvas.height/2+15); context.strokeText('Landscape Design',Mycanvas.width/2-150,Mycanvas.height/2+15); </script>
并且把之前在chrome开发者工具里输入的style属性复制到<canvas>标签里。刷新下chrome浏览器。
4、在script标签中绘制图形
先介绍一款工具,http://www.browsersync.cn/，省时的浏览器同步测试工具
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。
感兴趣可以去下载browsersync试试，具体使用方法，可查阅主页。
继续在<script>标签中，输入一下代码：
context.translate(240,220); //translate() 方法转换画布的用户坐标系统。
context.beginPath();
context.lineTo(-30,-50);
context.lineTo(-10,-80);
context.lineTo(-24,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
context.lineTo(0,-130);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(24,-80);
context.lineTo(10,-80);
context.lineTo(30,-50);
context.closePath();
这是一段绘制树冠的代码，输入 context.stroke();描绘路径。
保存文件，刷新浏览器查看效果。
绘制的树冠
可通过，以下代码更改线宽，结合点，路径颜色。
//加宽线条
context.lineWidth=4;
//平滑路径的接合点,bevel,miter
context.lineJoin='round';
//将颜色改成棕色
context.strokeStyle='#663300';
最后再context.stroke();下
接下来再把树冠颜色填充，绘制树干等。
//将填充色设置为绿色并填充树冠
context.fillStyle='#339900';
context.fill();
//绘制树干
context.fillStyle='#663300';
context.fillRect(-5,-50,10,20);
//绘制水平线
context.fillRect(-120,-30,420,2);
至此，图案已经绘制完成。
源文件下载
https://github.com/shadowcz007/jiaocheng1/blob/master/DesignCanvas01.html
本文未经许可，请勿转载
自在园版权所有
腾讯云开发者
