《WebGL编程指南》学习笔记——2.使用< canvas >元素

最新推荐文章于 2024-01-18 21:00:30 发布

hushhw

最新推荐文章于 2024-01-18 21:00:30 发布

阅读量672

点赞数 1

分类专栏： WebGL 文章标签： webgl html5 编程图形

本文链接：https://blog.csdn.net/hushhw/article/details/78821908

版权

WebGL 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

《WebGL编程指南》学习笔记——2.使用< canvas >元素

上一节初步认识了WebGL，这一小节我们来开始学习使用< canvas >元素绘制二维图形

WebGL编程指南学习笔记2使用 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.js
function 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

hushhw

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《WebGL编程指南》学习笔记——2.使用< canvas >元素

上一节初步认识了WebGL，这一小节我们来开始学习使用< canvas >元素绘制二维图形认识 canvas 标签使用 canvas 标签HelloCanvas2d实例获取 canvas 元素通过元素来获取二维图形的绘图上下文绘制二维图形下小节我们正式开始学习如何在< canvas >中使用WebGLWebGL采用HTML5中新引入的元素，它定义了网页上的绘图区域，如果没有WebGL，
复制链接

扫一扫

专栏目录