html5 canvas绘制图形,html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生。html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox、Chrome、Opera、Safari、IE9+)都已经开始支持html5了。除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛。html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊。

html5,说其是「新兴」的,其实也不算新了。毕竟,html5早在2008年其第一份正式草案就已经对外公布。从2008年算起,到现在也算是有些年头了。不过,到目前为止,对于大多数开发人员而言,仍然是「雷声大,雨点小」——听说html5的多,实际使用html5的却很少。

众所周知,html5中增加了许多新特性。在html5的众多特性中,Canvas应该算是最引人注目的新特性之一。我们使用html5的Canvas对象可以直接在浏览器的网页上绘制图形。这意味着浏览器可以脱离Flash等第三方插件,直接在网页上显示图形或动画。

现在,我们就来为html5初学者介绍如何使用html5 Canvas绘制基本的图形。

首先,我们需要准备如下html基础代码:

HTML5 Canvas入门示例

上述代码是一个html5页面的基本代码模板。其中,第一行代码是一个文档类型标签指令,这也是html5页面的标准文档类型指令,用于告诉浏览器「这是一个html5页面,请按照html5的网页标准来解析显示该页面」。第4行代码用于告诉浏览器「这个html5页面的字符编码为UTF-8」,这也是html5网页设置字符编码的标准写法。这与以往的html字符编码指令有所不同。

现在,我们就在包含上述代码的html文件中进行Canvas绘制图形的实例讲解。首先,我们在上述html代码的body部分添加如下canvas标签。

HTML5 Canvas入门示例

您的浏览器不支持canvas标签。

此时,我们使用支持html5的浏览器打开该页面,将会看到如下内容:

248e3ca5a05fa1e68614d9b8d11cc42c.png

canvas标签显示效果

在html5中,canvas标签本身并没有任何行为,仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布,还需要我们自己使用JavaScript提供的canvas API编写相应的代码从而在这块画布上绘制出我们想要的图形。

备注:canvas标签体内的文字内容将会在不支持html5的浏览器中显示。如上述html代码所示,如果你的浏览器不支持html5的canvas标签,那么将会在canvas标签处显示文字「您的浏览器不支持canvas标签」。

作为「画家」的我们,首先需要熟悉我们手中的画笔,也就是JavaScript中的Canvas对象及其相关内容。

在html5中,一个canvas标签就对应一个Canvas对象,我们在JavaScript可以使用document.getElementById()等常规函数来获取该对象。值得注意的是,在JavaScript中,我们并不是直接操作Canvas对象,而是通过Canvas对象来获取对应的图形绘制上下文对象CanvasRenderingContext2D,然后我们再利用CanvasRenderingContext2D对象自带的许多绘制图形的函数来绘图。

这就好像是每一张画布都对应一支画笔,要想在画布上绘画,我们就先要拿到对应的画笔,然后使用这支画笔在画布上绘图。CanvasRenderingContext2D对象就相当于这支画笔。现在,我们就先来尝试在JavaScript中拿到这支画笔。

HTML5 Canvas绘制线条入门示例

您的浏览器不支持canvas标签。

//获取Canvas对象(画布)

var canvas = document.getElementById("myCanvas");

//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误

if(canvas.getContext){

//获取对应的CanvasRenderingContext2D对象(画笔)

var ctx = canvas.getContext("2d");

}

如上述代码所示,我们可以使用Canvas对象的getContext()方法来获取CanvasRenderingContext2D对象。比较细心的读者应该注意到了:getContext()方法需要传入一个字符串——2d,获取到的CanvasRenderingContext2D对象的名称中也带有2D。这是因为,目前html5只支持2D绘图,但是在未来的html5中也可能支持3D或其他形式的绘图。届时,我们可能就需要使用getContext("3d")来获取CanvasRenderingContext3D对象并绘制3D图形了

HTML5—canvas绘制图形(1)

1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

HTML5 Canvas绚丽的小球详解

实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 ...

HTML5 canvas绘制图形

demo.html

使用html5 canvas绘制图片

注意:本文属于系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

使用html5 canvas绘制圆形或弧线

注意:本文属于系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

使用html5 Canvas绘制线条(直线、折线等)

使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

学习笔记:HTML5 Canvas绘制简单图形

HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作.

解决html5 canvas 绘制字体、图片与图形模糊问题

html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

随机推荐

wex5 实战 用户点评与提交设计技巧

最近遇到很多同学做毕业设计,其中有一项是用户点评与提交.功能并不复杂,同学们又不会,做为一个完整的功能,如果用wex5来设计开发,事半功倍.今天就以景区实战来向大家展示wex5的高效与强大.半天可以设 ...

cent os下面的基本配置操作

二,修改Linux分辨率命令行 在root用户模式下,输入$ vi /boot/grub/grub.conf(路径可能会不一样,也可以是 /etc/grub.conf),打开grub.conf文件 我 ...

scrollview不能滚动

1. 图片视图上不能直接滚动,需要设置交互属性为YES _contentView = [[UIImageView alloc]initWithFrame:CGRectMake(0, _headerVi ...

Docker 用法总结之:管理工具 shipyard 的具体使用指南

Docker 的命令行就已经非常好用了,假设非要加上基于 Web 的管理界面的话也有一些选择,如 DockerUI (Angular.js), Dockland (Ruby), Shipyard (P ...

CXF-02: 使用CXF处理JavaBean式的复合类型和List集合类型

Cat.java: package com.war3.ws.domain; public class Cat { private Integer id; private String name; pr ...

[Python]django使用多进程连接msyql错误

问题 mysql 查询出现错误 error: (2014, "Commands out of sync; you can't run this command now") 查询 m ...

JavaScipt浅谈——全局变量和局部变量

全局变量的作用域为所属的整个程序. 全局变量的定义形式有: (1)在函数外定义 (2)在函数内定义,但不加var声明        (3)使用 window.变量名 的形式定义         (4) ...

linux远程目录共享

一.环境介绍 1.服务器说明: 有两台服务器,(1)101报表服务器,上面是tomcat跑的原生FineReport报表系统,(2)103业务服务器,上面是具体的业务系统. 2.需求说明: 报表文件由 ...

datatables数据渲染自定义

"data": "ip",渲染回调函数中的data['ip']字段将传给render函数中的data:render函数的返回内容将代替"data&qu ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值