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