HTML5画布概述

原创 2015年08月06日 14:15:55

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

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

声明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完成的画图,按照下列步骤:

  1. 等待页面被完全加载。
  2. 获取引用canvas元素。
  3. 获得canvas元素2D背景的。
  4. 绘制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上下文对象,从而导致图形上被绘制在画布上。

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5 canvas画布(一)

HTML5中canvas元素用于在网页上绘制图形。Canvas的特点 Canvas画布是一个矩形区域,可以控制其每一个像素 Canvas使用JavaScript来控制画图 Canvas具有直线、矩形、...
  • anda0109
  • anda0109
  • 2016年06月18日 22:10
  • 1932

关于HTML5的画布canvas

关于HTML5的画布canvas,实现的效果有:几何形状,直线,文本,渐变 效果。
  • u012311697
  • u012311697
  • 2015年03月27日 00:48
  • 444

Html5之画布,尽情地画吧

现在的很多浏览器都支持了html5了,所以html5里面的画布也是被广泛支持滴,想想是不是有点小激动呢,来吧,我们瞅瞅画布吧 画布:也就是html的一个正常元素,以开始的标记。 话不多说,来,上代...
  • sinat_22808389
  • sinat_22808389
  • 2016年07月14日 17:07
  • 472

用python和html5在画布上画个车子和笑脸

画汽车 python提供了tutle(海龟)模块。这个模块提供了编写向量图的方法,基本上就是画直线,点和曲线。 海龟是怎样工作的,首先让python导入turtle模块。 import turtle ...
  • qq_23948283
  • qq_23948283
  • 2016年06月09日 00:01
  • 2250

HTML5 Canvas 画布画出一条直线

利用HTML5 Canvas画布,画出一条直线,让我们走出万里长征的第一步
  • jy03169496
  • jy03169496
  • 2016年03月20日 17:51
  • 1875

html5画布操作的简单学习-简单时钟

html5画布操作的简单学习-简单时针 一.什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素...
  • as375256234
  • as375256234
  • 2014年12月13日 11:55
  • 2149

基于html5画布的一个小控件

  • 2013年03月15日 16:07
  • 16KB
  • 下载

html5 画布测试工具

  • 2013年04月09日 09:18
  • 118KB
  • 下载

html5 画布例子

  • 2017年02月06日 20:49
  • 10KB
  • 下载

HTML5 Canvas 画布开发 傻瓜书 (英文版)

  • 2016年09月21日 15:29
  • 16.79MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5画布概述
举报原因:
原因补充:

(最多只允许输入30个字)