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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android Note

[译] 带你领略 ConstraintLayout 1.1 的新功能前言带你领略 ConstraintLayout 1.1 的新功能

20720
来自专栏散尽浮华

Html之初体验

概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言。相当于定义统一的一套规则,大...

256100
来自专栏韦弦的偶尔分享

微信小程序带图片弹窗简单实现

(PS:最近发现一个问题,如果页面内有textarea时,textarea的层级会比蒙版视图高,并且无法修改,做了一个比较笨的解决方案:小程序textarea层...

1.8K20
来自专栏猿人谷

Cocoa编程中视图控制器与视图类详解

iPhone编程规则是:一个窗口,多个视图。UIView是iPhone屏幕上很多控件的基础类。每个iPhone用户界面都是由显示在UIWindow(这其实也是个...

25550
来自专栏向治洪

React Native ios开发第一课

前言 本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用。如果你现在还不太了解React Native是什么以及Facebook为什么...

22780
来自专栏小狼的世界

基于Vue、Bootstrap的Tab形式的进度展示

最近基于Vue、Bootstrap做了一个箭头样式的进度展示的单页应用,并且支持了对于一个本地JS文件的检索,通过这个单页应用,对于Vue的理解又深入了一些。在...

33720
来自专栏全栈架构

看微信小程序 wx.canvasToTempFilePath 方法之巨坑的解决之道

当然这个项目是可以用的,但是生成不了图片,打开 tempFilePath直接报错,发现了什么原因了吗?

33410
来自专栏全栈数据化营销

制作出漂亮分词和词云图的方法

你想知道哪些漂亮的词云图是怎么做出来的吗? ? 这篇是对于没有python基础而言的朋友用来做分词和词频的文章。 一、分词工具:图悦:http://www.pi...

67250
来自专栏程序员叨叨叨

未来布局之星——ConstraintLayout

ConstraintLayout是Android Studio 2.2中具有亮点的新功能之一,相比于RelativeLayout、LinearLayout等传统...

7420
来自专栏hbbliyong

Idea 常用功能汇总,工作中常用技巧,移出请说明原因,笔记花了好长时间汇总的

1.隐藏没用到的文件 比如 IDEA 的项目配置文件(.iml 和.idea),打开 Settings-File Types, 加入要隐藏的文件后缀。 ? 2...

28960

扫码关注云+社区

领取腾讯云代金券