专栏首页MixLab科技+设计实验室H5Canvas入门(上)(下)

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


本文未经许可,请勿转载

自在园版权所有

本文分享自微信公众号 - 科技Mix设计Lab(Design-AI-Lab),作者:池志炜

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-04-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从Storyboard到DIY实现一个漫画生成器-01

    用户只需拍摄一段视频并将其加载到 Storyboard 中即可将视频转换为单页漫画的布局。该应用会自动选择有趣的帧,并将其应用于6种视觉样式中的一种。生成的漫画...

    mixlab
  • C#+web=? 微软Blazor

    C#是微软公司发布的一种面向对象的、运行于.NET Framework和.NET Core(完全开源,跨平台)之上的高级程序设计语言。

    mixlab
  • AI魔性音乐 | 创业反思篇(I)

    郭靖:第一次创业的认知模型比较简单,当时就是希望能将chatbot应用在某个垂直领域中,觉得chatbot有价值,用在某个垂直领域中能解决问题,就做了。

    mixlab
  • js延时定时器

    js实现定时器的另一种方式,但是感觉跟写setInterval差不太多,都有可能导致堆栈溢出的问题。不建议代码中使用。

    蓓蕾心晴
  • 手写源码系列(一)——call、apply、bind

    本文首发于知乎专栏——前端面试题汇总,大家可以通过文章底部的阅读原来来访问原文地址

    用户1687375
  • samba共享服务安装,开发可用映射

    1987年,微软公司和英特尔公司共同制定了SMB(Server Messages Block,服务器消息块)协议,旨在解决局域网内的文件或打印机等资源的共享问题...

    菲宇
  • 学界 | 看车识党派:斯坦福大学李飞飞团队发表计算机视觉人口统计新方法

    选自Stanford News 机器之心编译 参与:刘晓坤、李泽南 斯坦福大学的研究者们正在使用计算机视觉系统,利用谷歌街景图片上街边汽车的型号来识别给定社区的...

    机器之心
  • 一个Java程序员的年终总结

    新的一年过去了,又到了该总结的时候。这一年可以说是很重要一年,很多事情,都阶段性的开花结果。 先是2月份,去了海辉,实在说,没有进去这前想的那么...

    程序员互动联盟
  • Kafka集群监控、安全机制与最佳实践

    所以本小节先介绍该监控工具的安装及配置,到如下地址可以下载各个版本的Kafka Manager:

    端碗吹水
  • 工具| PocSuite 使用介绍

    斗哥采访环节 (1)什么是POC? 答:POC是用来验证漏洞是否存在的一段代码,经常对漏洞做检测的同学对写POC这件事应该不陌生吧哈哈。 (2)框架有什么用? ...

    漏斗社区

扫码关注云+社区

领取腾讯云代金券