《WebGL编程指南》学习笔记——2.使用< canvas >元素
来源:互联网 发布:淘宝网上能买汽车吗 编辑:程序博客网 时间:2024/06/06 14:24
《WebGL编程指南》学习笔记——2.使用< canvas >元素
上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形
- WebGL编程指南学习笔记2使用 canvas 元素
- 认识 canvas 标签
- 使用 canvas 标签
- HelloCanvas2d实例
- 获取 canvas 元素
- 通过元素来获取二维图形的绘图上下文
- 绘制二维图形
下小节我们正式开始学习如何在< canvas >中使用WebGL
WebGL采用HTML5中新引入的元素,它定义了网页上的绘图区域,如果没有WebGL,JS只能在上绘制二维图形,有了WebGL,就可以在上面绘制三维图形了。
认识< canvas >标签
HTML5出现以前,如果你想在网页上显示图像,只能使用HTML提供的原生方案标签。用这个标签显示图像虽然简单,但只能显示静态的图片,不能进行实时绘制和渲染。因为,后来出现了一些第三方解决方案,如Flash Player等。
HTML5的出现改变了一切,它引入了< canvas >标签,允许JS动态地绘制图形。
艺术家们将画布(canvas译为”画布”)作为绘画的地方,类似地,< canvas >标签定义了网页上的绘图区域。有了< canvas >,你就可以使用JS绘制任何你想画的东西。< canvas >提供一些简单的会凸函数,用来描绘点、线、矩形、圆等。
使用< canvas >标签
为了在< canvas >上绘制二维图形,需经过以下几个步骤:
- 创建标签,指定绘图范围。
- 利用JavaScript获取到标签。
- 向该标签请求二维图形的“绘图上下文”。
- 使用绘图上下文调用相应的绘图函数,绘制二维图形。
HelloCanvas2d实例
下面是HelloCanvas2d实例,我们利用< canvas >画个矩形,并用红色填充
此系列我编写的源码都可以在我的github下载到:https://github.com/hushhw/WebGL-Programming-Guide/tree/master/00HelloCanvas2d
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Clear canvas</title></head><body onload="main()"> <canvas id="mycanvas" width="400" height="400"> Please use the browser supporting "canvas" </canvas> <script src="HelloCanvas2d.js"></script></body></html>
//HelloCanvas2d.jsfunction main() { //获取<canvas>标签 var canvas = document.getElementById("mycanvas"); //如果没找到<canvas>标签,则输出错误信息 if (!canvas) { console.log('Failed to retrieve the <canvas> element.'); return; } //要在<canvas>上绘制图像,须先获取绘图上下文,“2d”代表我们要绘制二维图形。 var ctx = canvas.getContext("2d"); //fillstyle:设置或返回用于填充绘画的颜色、渐变或模式;这里我们设置填充颜色为红色。 ctx.fillStyle = "red"; /* 使用填充颜色填充矩形。 fillRect(x,y,width,height) x 矩形左上角的 x 坐标 y 矩形左上角的 y 坐标 width 矩形的宽度 height 矩形的高度 */ ctx.fillRect(120, 10, 150, 150);}
获取< canvas >元素
//获取<canvas>标签 var canvas = document.getElementById("mycanvas"); //如果没找到<canvas>标签,则输出错误信息 if (!canvas) { console.log('Failed to retrieve the <canvas> element.'); return; }
在HTML文件中通过JS程序获取< canvas >元素。可以使用document.getElementById 的函数来获取。这个方法只有一个参数,就是HTML文件中< canvas >标签的 id 属性
通过元素来获取二维图形的绘图上下文
//要在<canvas>上绘制图像,须先获取绘图上下文,“2d”代表我们要绘制二维图形。 var ctx = canvas.getContext("2d");
< canvas >元素可以同时支持二维图形和三维图形,它不直接提供绘图方法,而是提供一种叫上下文的机制来绘图。
在上述代码中,canvas.getContext() 方法的参数制订了上下文的类型(二维或三维)。如果你想要绘制二维图形,就必须指定为2d(区分大小写)。
绘制二维图形
//fillstyle:设置或返回用于填充绘画的颜色、渐变或模式;这里我们设置填充颜色为红色。 ctx.fillStyle = "red"; /* 使用填充颜色填充矩形。 fillRect(x,y,width,height) x 矩形左上角的 x 坐标 y 矩形左上角的 y 坐标 width 矩形的宽度 height 矩形的高度 */ ctx.fillRect(120, 10, 150, 150);
< canvas >的坐标系横轴为x轴(正方向朝右),纵轴为y轴(正方向朝下)。原点(0,0)在左上方。fillRect方法中设置的x,y指的是从坐标的开始算,右移x像素,下移y像素的位置,就是矩形左上角的位置。如图所示:
文章内容借鉴于:
《WebGL编程指南》
http://www.cnblogs.com/mirror-pc/p/4179062.html
http://blog.csdn.net/weixin_40282619/article/details/78019085
- 《WebGL编程指南》学习笔记——2.使用< canvas >元素
- 《WebGL编程指南》学习笔记——3.在Canvas中使用WebGL
- 《WebGL编程指南》学习笔记——1.WebGL概述
- 《WebGL编程指南》学习——入门
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(1-用canvas画一个蓝色矩形)
- 【笔记】《WebGL编程指南》学习-第1章WebGL概述
- 《WebGL编程指南》学习笔记——4.绘制一个点
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(2-WebGL的HelloWorld)
- 《WebGL编程指南》学习——绘制和变换三角形
- 《WebGL编程指南》学习——颜色与纹理
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(6-改变点的颜色))
- HTML5权威指南笔记:35-使用canvas元素(1)
- HTML5权威指南笔记:36-使用canvas元素(2)
- 【笔记】《WebGL编程指南》学习-第5章颜色与纹理(3-使用多幅纹理))
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(3-画一个点-版本1))
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(4-画一个点-版本2))
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(5-通过鼠标点击画点)
- <canvas>学习笔记——如何使用<canvas>
- 软件
- numpy函数
- opencv相机姿态解算程序
- spring 5.0 AOP底层讲解 06
- Hadoop
- 《WebGL编程指南》学习笔记——2.使用< canvas >元素
- poj3552 Slim Span(暴力+kruskal)
- 双系统正确卸载Ubuntu系统
- 浏览器环境下js对文件进行写入
- JavaWeb学习笔记-servlet-02-生命周期
- RocketMQ原理(4)——消息ACK机制及消费进度管理
- leetcode 229[medium]--- Majority Element II
- Objective-C 判断对象是否相等
- curl编译以及arm交叉编译