HTML5画布概述

最新推荐文章于 2022-09-04 16:17:06 发布

一喵呜

最新推荐文章于 2022-09-04 16:17:06 发布

阅读量2.3k

点赞数

分类专栏： HTMl5 HTML5自由者文章标签：黄艺斌 HTML5 canvas

本文链接：https://blog.csdn.net/html5_/article/details/47316047

版权

HTML5自由者同时被 2 个专栏收录

94 篇文章 13 订阅

订阅专栏

HTMl5

81 篇文章 0 订阅

订阅专栏

本文介绍了HTML5的canvas元素的使用，包括如何声明canvas元素和在canvas上绘制图形。canvas元素通过JavaScript进行画图，遵循立即模式，每次绘制都会覆盖之前的形状，需要手动重新绘制。文中提供了一个简单的代码示例展示画布的绘图过程。

摘要由CSDN通过智能技术生成

本文提供了HTML5的画布基本用法的概述。概述被分成两部分：

声明一个HTML5 canvas元素。
绘图画布元素的图形。

声明canvas元素

首先，让我们来看看如何在一个HTML页面声明canvas元素：

<canvas id="ex1" width="500" height="150"
           style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>

上面的代码声明了一个帆布带元素的宽度 设置为500，高度设置为150，和样式设置为颜色1像素边框#CCCCCC。

里面的文字画布元素将被忽略，如果浏览器支持HTML5的Canvas元素。如果不支持HTML5的画布元素，文本可能会被显示为在浏览器的普通文字。

你应该把画布的HTML代码在你的网页在您想要在画布可见的位置。就像任何其他的HTML元素（如DIV元素）。

在Canvas元素绘制图形

绘制一个HTML5画布上的图形绘制在立即模式。直接模式意味着，只要你画的形状在画布上，在画布不再知道该形状什么。形状是可见的，但你不能单独操作的形状。它像一个真正的帆布画。涂一次，你就只剩下了彩色颜料/像素。

这是违背SVG，在那里你可以单独操作的形状，并有全图重新绘制。在HTML5中，你将不得不重新绘制自己的一切，如果你想改变的绘制图。

一个HTML5 canvas元素使用JavaScript完成的画图，按照下列步骤：

等待页面被完全加载。
获取引用canvas元素。
获得canvas元素2D背景的。
绘制2D使用环境的抽奖功能的图形。

下面是一个简单的代码示例，说明上述步骤：

<script>

    // 1. wait for the page to be fully loaded.
    window.onload = function() {
        drawExamples();
    }


    function drawExamples(){
    
        // 2. Obtain a reference to the canvas element.
        var canvas  = document.getElementById("ex1");

        // 3. Obtain a 2D context from the canvas element.
        var context = canvas.getContext("2d");

        // 4. Draw graphics.
        context.fillStyle = "#ff0000";
        context.fillRect(10,10, 100,100);
    }
</script>

首先，事件侦听器功能被连接到窗口。当网页加载此事件侦听器的功能被执行。此函数调用我定义另一个函数，称为drawExamples（） 。

二，drawExamples（）函数中，使用所引用canvas元素的document.getElementById（）函数，将IDcanvas元素，如在canvas元素的声明中定义。

三，drawExamples（）函数获取对从画布元素的2D背景下，通过调用canvas.getContext（“2D”）以前获得的canvas元素上。

四，（）drawExamples函数调用各种绘图功能的2D上下文对象，从而导致图形上被绘制在画布上。

下面是执行代码时的外观：