首页 web前端 H5教程 HTML5边玩边学(2)基础绘图实现方法_html5教程技巧

HTML5边玩边学(2)基础绘图实现方法_html5教程技巧

May 16, 2016 pm 03:51 PM

一、坐标系

其实只要玩过一点点图形编程的人都知道,电脑上的坐标系和数学上的坐标系稍微有点不同,坐标的原点在绘制区域(这里是Canvas)的左上角,X轴正向朝右,Y轴正向朝下,如下图

声明:为本文为原创文章,作者保留所有权利!欢迎转载,转载请注明作者左洸和出处博客园

 

二、Stroke 和 Fill

HTML5中将图形分为两大类:

第一类称作 Stroke,我的理解就是轮廓、勾勒或者线条,总之,图形是由线条组成的;

第二类称作 Fill,就是填充区域

上下文对象中有两个绘制矩形的方法,可以让我们很好的理解这两大类图形的区别:

一个是 strokeRect,还有一个是 fillRect

下面的代码分别用这两个方法来绘制矩形,你可以分别点击两个按钮来看看有什么不同,从而理解 stroke 和 fill 的区别
设置画布

复制代码
代码如下:

你的浏览器不支持 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器




strokeRect 和 fillRect

复制代码
代码如下:

function strokeRect(){
var canvas = document.getElementById('test1');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
ctx.strokeStyle="blue";
ctx.strokeRect(10,10,180,180);
}
function fillRect(){
var canvas = document.getElementById('test1');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
ctx.fillStyle="blue";
ctx.fillRect(10,10,180,180);
}
 

你的浏览器不支持 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器

 

三、颜色

上下文对象有两个属性可以用来设置颜色:strokeStyle 和 fillStyle

strokeStyle 的值决定了你当前要绘制的线条的颜色

fillStyle 的值决定了你当前要填充的区域的颜色

颜色值应该是符合CSS3 颜色值标准的有效字符串。下面的例子都表示同一种颜色。

//这些 fillStyle 的值均为 '橙色',ctx 是上下文对象 
ctx.fillStyle = "orange"
ctx
.fillStyle = "#FFA500";
ctx
.fillStyle = "rgb(255,165,0)"
ctx
.fillStyle = "rgba(255,165,0,1)";

关于颜色,以后会有更多的说明。

 

四、基本绘图

除了上面给出的两个绘制矩形的方法外,上下文对象还有几个方法可以用来绘制一些基本图形,如下:

moveTo(x,y):moveTo方法并不能画出任何东西,它只是将画笔的当前点移动到(x,y)处

lineTo(x,y):从当前点到(x,y)点绘制一条直线。注意:绘制完成后,当前点就变成了(x,y),除非你用 moveTo 方法去改变他

arc(x, y, radius, startAngle, endAngle, anticlockwise) :绘制一条弧线

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) :这两个方法都是绘制贝叶斯曲线,具体用法看参考手册

rect(x, y, width, height) :绘制一个矩形。注意: 当它被调用时,moveTo 方法会自动被调用,参数为(0,0),于是起始坐标又恢复成初始原点了。

有了直线、弧线、曲线、方形和圆形这几种基本图形,我们就可以组合出更复杂的图形了

 

五、理解绘制路径 Drawing Path

上一篇文章中说过,我们绘制的图形是先绘制到一个抽象的上下文对象中(其实就是内存中),然后再将上下文对象输出到显示设备上,这个输出到显示设备的过程不需要我们操心。但是有时候我们并不想立刻输出每一次绘制动作,也许我想让一组绘制动作完成以后,再集中一块输出, 比如一个围棋棋盘有19×19条直线组成,正常情况下需要向想显示设备输出19×19次,但是如果我们先暂停向显示设备输出,等在上下文中(内存中)全部绘制完成19×19条直线时,再向显示设备输出,只需要输出一次就可以了。

这种情况在HTML5中叫做绘制路径,它由几个上下文对象的方法组成:

beginPath() :开始路径,意思就是在你调用这个方法后,你绘制的图形就不会再向屏幕输出了,而只是画到了上下文对象中(内存中)

stroke() :将你调用 beginPath 方法以后绘制的所有线条,一次性输出到显示设备上

closePath() :如果你调用 beginPath 方法以后,在上下文对象中进行了一系列的绘制,但是得到的图形是不闭合的,这个方法将会帮你补上最后一条直线,将你的图形闭合起来。

注意closePath并不向屏幕输出图形,而只是在上下文对象中补上一条线,这个步骤不是必需的

fill() :

如果你的绘制路径组成的图形是封闭的,这个方法将用 fillStyle 设置的颜色填充图形,然后立即向屏幕输出;

如果绘制路径不是封闭的,这个方法会先将图形闭合起来,然后再填充输出。

注意:所有的 fill 图形,如 fillRect 等,都是立刻向屏幕输出的,他们没有绘制路径这个概念

 

下面的代码将绘制一个简单的填充三角形。

注意:绘制三角形的时候,默认的背景色为白色,默认的前景色为黑色
设置画布

复制代码
代码如下:

你的浏览器不支持 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器





绘制三角形

复制代码
代码如下:



你的浏览器不支持 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器

你的浏览器不支持 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器

 

六、半个单位的坐标

里还要回过头来说说坐标,下面的代码是在画布上绘制网格,点击“画网格”按钮可以看见效果
设置画布

复制代码
代码如下:

你的浏览器不支持 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器





绘制三角形

复制代码
代码如下:



你的浏览器不支持 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器

你的浏览器不支持 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器

 

这段代码中,有一处奇怪的地方,就是坐标循环是从0.5开始的,这是为什么呢?

如下图,假如我想绘制一条从(1,0)到(1,3)的线,由于线的默认宽度是一个像素,所以在我想象中应该绘制成深绿色的部分,即在坐标 1 两边各占半个像素的宽度。

然而,浏览器的最小单位是一个像素,所以他会向两边扩展,实际绘制出来的浅绿色的部分,即占用了两个像素的宽度。这样,我们绘制的线条在坐标上就不精确了

如下图,如果我们给出的起始坐标是(1.5,0)和(1.5,3),那么线条的宽度才是正确的一个像素。

 

 

七、清空画布

上面给出的两段代码中,我们都用到了清空画布,用到的方法如下:

clearRect(x,y,width,height):

它接受四个参数, x 和 y 指定矩形左上角(相对于原点)的位置,width 和 height 是矩形的宽和高。调用该方法会将给出的矩形区域中所有绘制图形都清空,露出画布的背景

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

h5项目怎么运行 h5项目怎么运行 Apr 06, 2025 pm 12:21 PM

运行 H5 项目需要以下步骤:安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境,创建项目文件夹、初始化项目、编写代码。启动开发服务器,使用命令行运行命令。在浏览器中预览项目,输入开发服务器 URL。发布项目,优化代码、部署项目、设置 Web 服务器配置。

H5页面制作究竟指什么 H5页面制作究竟指什么 Apr 06, 2025 am 07:18 AM

H5 页面制作是指使用 HTML5、CSS3 和 JavaScript 等技术,创建跨平台兼容的网页。其核心在于浏览器解析代码,渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误,应使用开发者工具调试;而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等,以提高加载速度和代码质量。

h5怎么制作点击图标 h5怎么制作点击图标 Apr 06, 2025 pm 12:15 PM

制作 H5 点击图标的步骤包括:在图像编辑软件中准备方形源图像。在 H5 编辑器中添加交互性,设置点击事件。创建覆盖整个图标的热点。设置点击事件的操作,如跳转页面或触发动画。导出 H5 文档为 HTML、CSS 和 JavaScript 文件。将导出的文件部署到网站或其他平台。

H5页面制作适合哪些应用场景 H5页面制作适合哪些应用场景 Apr 05, 2025 pm 11:36 PM

H5(HTML5)适合应用于轻量级应用,如营销活动页面、产品展示页面和企业宣传微网站。它优势在于跨平台性和丰富的交互性,但局限性在于复杂的交互和动画、本地资源访问和离线功能。

H5页面制作是前端开发吗 H5页面制作是前端开发吗 Apr 05, 2025 pm 11:42 PM

是的,H5页面制作是前端开发的重要实现方式,涉及HTML、CSS和JavaScript等核心技术。开发者通过巧妙结合这些技术,例如使用<canvas>标签绘制图形或使用JavaScript控制交互行为,构建出动态且功能强大的H5页面。

什么是H5编程语言? 什么是H5编程语言? Apr 03, 2025 am 12:16 AM

H5不是独立编程语言,而是HTML5、CSS3和JavaScript的集合,用于构建现代Web应用。1.HTML5定义网页结构和内容,提供新标签和API。2.CSS3控制样式和布局,引入动画等新特性。3.JavaScript实现动态交互,通过DOM操作和异步请求增强功能。

H5指的是什么?探索上下文 H5指的是什么?探索上下文 Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

h5怎么制作弹窗 h5怎么制作弹窗 Apr 06, 2025 pm 12:12 PM

H5 弹窗制作步骤:1. 确定触发方式(点击式、时间式、退出式、滚动式);2. 设计内容(标题、正文、行动按钮);3. 设置样式(大小、颜色、字体、背景);4. 实现代码(HTML、CSS、JavaScript);5. 测试和部署。

See all articles