浅析HTML5 Canvas入门教程及实例

什么是 Canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <canvas> 元素.
注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 元素.

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个 <canvas> 元素.
使用 style 属性来添加边框:
实例
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
实例
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

实例解析:

首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var ctx=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

例子:

 代码如下 复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="脚本小子_小贝_HTML5_canvas"/>
<meta name="description" content="脚本小子_小贝_HTML5_canvas"/>
<meta name="" content="脚本小子小贝 xiaobei qq:2801616735"/>
<title>HTML5_canvas</title>
<style>
p{
    border:1px dashed red;
    padding:5px;
}
canvas{
    border:1px solid yellow;
}
</style>
</head>

<body>
    <h2>HTML5_canvas</h2>
    <ul style="list-style:none">
        <li>1、创建canvas</li>
        <li>2、创建矩形</li>
        <li>3、创建线条</li>
        <li>4、创建文本</li>
        <li>5、创建圆形</li>
        <li>6、创建图像</li>
    </ul>
    <hr/>
    <h3>1、创建canvas</h3>
    <p>
        <canvas id="canvas">亲,你的浏览器不支持canvas.^_^</canvas>
    </p>
    <hr/>
    <h3>2、创建矩形</h3>
    <p>
        <canvas id="canvas1">亲,你的浏览器不支持canvas.^_^</canvas>
        <button onclick="func(1);">创建矩形</button>
    </p>
    <hr/>
    <h3>3、创建线条</h3>
    <p>
        <canvas id="canvas2">亲,你的浏览器不支持canvas.^_^</canvas>
        <button onclick="func(2);">创建线条</button>
    </p>
    <hr/>
    <h3>4、创建文本</h3>
    <p>
        <canvas id="canvas3">亲,你的浏览器不支持canvas.^_^</canvas>
        <button onclick="func(3);">创建文本</button>
    </p>
    <hr/>
    <h3>5、创建圆形</h3>
    <p>
        <canvas id="canvas4">亲,你的浏览器不支持canvas.^_^</canvas>
        <button onclick="func(4);">创建圆形</button>
    </p>
    <hr/>
    <h3>6、创建图像</h3>
    <p>
        <img src="canvas.png" id="img"/>
        <canvas id="canvas5">亲,你的浏览器不支持canvas.^_^</canvas>
        <button onclick="func(5);">创建图形</button>
       
    </p>
</body>
<script>
    function func(id)
    {
        var c = document.getElementById('canvas'+id);
        var ctx = c.getContext('2d');
        switch(id)
        {
            case 1:
                ctx.fillStyle = "#FF0000";
                ctx.fillRect(10,10,100,50);
            break;
            case 2:
                ctx.beginPath();
                ctx.moveTo(10,10);
                ctx.lineTo(100,100);
                ctx.stroke();
            break;
            case 3:
                ctx.font="20px Arial";
                ctx.fillText("脚本小子_小贝_HTML5_canvas",10,50);
            break;
            case 4:
                ctx.beginPath();
                ctx.arc(95,50,40,0,2*Math.PI);
                ctx.stroke();
            break;
            case 5:
                var img=document.getElementById("img");
                c.width=img.width;
                c.height=img.height;
                ctx.drawImage(img,10,10);
            break;
        }
       
    }
</script>
</html>
时间： 2024-08-02 09:03:30

浅析HTML5 Canvas入门教程及实例的相关文章

php入门教程:stripos 实例教程

php入门教程:stripos  实例教程 定义和用法 该stripos ( )函数返回位置,首次出现了字串的开始位置. 如果字符串是没有发现,此功能返回FALSE . stripos(string,find,start) 参数 说明 string: 必须先, find: 必须要查找的字符串 start: Optional. Specifies where to begin the search 好了下面我们来看看.stripos例子. <?php echo stripos("Hello

Html5 Canvas渐变与图片实例教程

渐变 渐变色的使用比之前绘制任意一个图形都简单,而且可以填充到任何绘制的图形上,我们先看一下代码:  代码如下 复制代码 var grd = myCanvas.createLinearGradient(100, 100, 175, 50);  grd.addColorStop(0, "#FAFAFA");  grd.addColorStop(0.5, "red");  grd.addColorStop(0.75, "blue");  grd.ad

Twig模板引擎用法入门教程_php实例

本文实例讲述了Twig模板引擎用法.分享给大家供大家参考,具体如下: 介绍 Twig是一个灵活.高效并且安全的PHP模板引擎. 如果你使用过Smarty.Django或者Jinja这类基于文本的模板引擎的话,那么你会觉得Twig是很自然而然的事情.Twig严格遵守了PHP的信念,同时增加了在模板环境中很有用的函数,这些做法使得Twig不论是对设计师还是开发人员,都是非常友好的. Twig的主要特征有: 高效:Twig将模板编译成了优化了的PHP文件,与原生的PHP代码比较而言,性能损耗非常小.

Yii2框架制作RESTful风格的API快速入门教程_php实例

先给大家说下什么是REST restful REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的博士论文中,Roy Fielding是HTTP规范的主要编写者之一. 他在论文中提到:"我这篇文章的写作目的,就是想在符合架构原理的前提下,理解和评估以网络为基础的应用软件的架构设计,得到一个功能强.性能好.适宜通信的架构.REST指的是一组架构约束条件和原则." 如

joomla组件开发入门教程_php实例

本文讲述了joomla组件开发知识点.分享给大家供大家参考,具体如下: 在你进行编码之前,有一些文件和文件夹需要创建和一些查询语句需要运行.你不但可以创建组件而且不用额外的配置就可以尝试不同的特性.你也可以看到Joomla!组织和访问组件方法的概况.最后,你会像其它组件一样加入工具栏. Joomla!组件的结构 Joomla!的所有组件都遵守指定的命名约定.每个系统组件都有唯一的名字,名字不要包括空格.代码分成两个文件夹,文件夹以com_开头,紧接着就是组件的名字.因此,你要创建两个相同名字的c

Smarty环境配置与使用入门教程_php实例

本文实例讲述了Smarty环境配置与使用方法.分享给大家供大家参考,具体如下: 下载Smarty(这里以Smarty-2.6.26为例).解压下载的文件(目录结构还蛮复杂的).接下来演示给大家一个安装实例,看过应该会举一反三的. (1) 在根目录下建立了新的目录learn/,再在learn/里建立一个目录smarty/.将刚才解压缩出来的目录的libs/拷贝到smarty/里,再在smarty/里新建templates目录,templates里新建cache/,templates/,templa

高性能PHP框架Symfony2经典入门教程_php实例

Symfony2是一个基于PHP语言的Web开发框架,有着开发速度快.性能高等特点.本文以一个程序示例的实现过程详细叙述了Symfony2框架的配置与程序开发. 一.下载 首先是下载Symfony2,到 http://symfony.com/download或者本站下载http://www.jb51.net/codes/187833.html.本人以Ubuntu系统为例,采用.tgz的压缩包,解压源文件到/var/www目录中并执行: tar zxvf Symfony_Standard_Vend

Zend Framework 2.0事件管理器（The EventManager）入门教程_php实例

概述 EventManger是一个为以下使用情况设计的组件: 复制代码 代码如下: 实现简单的主题/观察者模式 实现面向切面的设计 实现事件驱动的架构 基本的架构允许你添加和解除指定事件的侦听器,无论是在一个实例基础还是一个共享的集合:触发事件:终止侦听器的执行. 快速入门 通常,你将会在一个类中创建一个EventManager. 复制代码 代码如下: use Zend\EventManager\EventManagerInterface; use Zend\EventManager\Event

smarty半小时快速上手入门教程_php实例

本文讲述了smarty快速上手入门的方法,可以让读者在半小时内快速掌握smarty的用法.分享给大家供大家参考.具体实现方法如下: 一.smarty的程序设计部分: 在smarty的模板设计部分我简单的把smarty在模板中的一些常用设置做了简单的介绍,这一节主要来介绍一下如何在smarty中开始我们程序设计.下载Smarty文件放到你们站点中. index.php代码如下: 复制代码 代码如下: <?php /** * * @version $Id: index.php * @package