HTML5简略介绍

今天要说下 HTML5特有的一个元素 canvas ,旨在让web页面上作矢量图不需要在依靠flash或是其他插件,在网页上使用canvas元素时,它会创建一块矩形区域,默认300*150,当然也是可以自定义的。Canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸。左上角坐标为x=0y=0的点称为原点。

 



 

Canvas的功能虽然很强大,但是如果它实现的效果,和当前HTML5已有的元素实现的效果一样,那当然还是直接使用已有的元素,执行效率上是会快一些的,如果canvas元素不被某些浏览器支持,那canvas就必须要要做好兼容性考虑,在canvas内定义一段替代内容,替代内容可以是一段说明文字或是一张图片。Canvas的一般样式,如边框,边距,都可以使用css语法来定义,其内部添加的文字,样式默认同canvas元素一样。

下面说说canvas API的使用,先从一个例子说起吧,在canvas中绘制一条对角线:先在html中放入一个canvas元素  然后在javascript脚本中开始作线,

 

function drawDiagonal(){

        //取得canvas元素及其绘图上下文

        var canvas = document.getElementByIdx_x("diagonal");

        var context = canvas.getContext('2d');      

      

        //用绝对坐标来创建一条路径

        context.beginPath();

        context.moveTo(10,140);

        context.lineTo(140,70);

      

        //将这条线绘制到canvas

        context.stroke();

      

}

window.addEventListener("load",drawDiagonal,true);

 

效果如下:



 

 

虽然比较简单,但是展示了使用HTML5 canvas API的重要流程。首先通过ID 获得canvas访问权,接着定义一个context变量,调用canvas对象的getContext方法,并传入希望使用的canvas类型。代码中调用了三个方法--beginPathmoveTolineTo,传入了这条线的起点和终点的坐标。

Canvas的强大功能远不止这些,当然限于篇幅,这里说不了很多,推荐大家一本书《HTML5高级程序设计》写的很详细,适合新手细细品读。

 

转载于:https://www.cnblogs.com/jinhuixin/p/4099058.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我的世界java和基岩版哪个好玩_我的世界:Java版本好玩还是基岩版好玩?老玩家看完后沉默了...

MC刚开始是在国外风靡了起来,传到中国的时候MC已经火了很久了,这时候外国已经出现了很多玩MC十分厉害的大神和主播,而在国外也有超多的服务器,其中有号称最强的原版生存服务器Scicraft,而在版本方面MC其实算下来大概有…

SQL Server简介

SQL Server是微软的一款关系型数据库。某些平台吹得天花烂坠,今天第一次在自己的项目中使用了下,感觉不是那么好,特别是SQL语句的支持度还是很欠缺,如limit等都不支持,还有特别单双引号都是需要特别注意的,下面是SQL S…

Windows下断言的类型及实现

一、内容综述 本文主要介绍Windows下断言assert的实现,并总结断言的不同应用准则。最后给出一个windows自定义断言的方法。 本文行文参考《Debugging Windows Programs》第三章相关内容,如果有兴趣的话建议读者可以深入阅读下。 二、断言的类型 1. ANSI…

mysql最大执行时间_导入大型MySQL数据库时,最大执行时间超过300秒

我正在尝试使用命令导入641 MBMySQL数据库&#xff1a;mysql -u root -p ddamiane_fakty < domenyin_damian_fakty.sql但是我收到了一个错误&#xff1a;ERROR 1064 (42000) at line 2351406: You have an error in your SQL syntax; check the manual that corresponds to …

linux右上角不显示网络连接_来体验下Linux吧

在前面的几期中我们从树莓派开始了解Linux&#xff0c;大家可能已经想来试一下手了。趁热打铁&#xff0c;本期我将介绍两种方便体验学习Linux的方法&#xff0c;在线体验或者安装虚拟机。1 在线体验Linux如果想快速的体验下Linux系统&#xff0c;我们可以选择云计算服务商提供…

debian下ror新建项目报错解决

一个是缺少mysql的开发包 sudo apt-get install libmysqld-dev 还有一个报错如下 debian ExecJS::RuntimeUnavailable: Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. 要么自己下载nodejs的包,要么在gem…

mysql中的默认约束_数据库中默认约束的作用

匿名用户1级2016-04-29 回答数据库约束是为了保证数据的完整性而实现的一套机制&#xff0c;它具体的根据各个不同的数据库的实现而有不同的工具。一般来说有以下几种实现方式&#xff1a;1、检查约束&#xff1a;通过在定义数据库表里&#xff0c;在字段级或者是在表级加入的检…

python md5解密_python 生成文件MD5码

pymd5.py的代码如下&#xff1a; #-*-coding:utf-8-*-Created on 2012-5-25 author: kanpiaoxueimport hashlib import os import sys def printUsage(): print (Usage: [python] pymd5.py ) def createMD5(filePath): if not os.path.isfile(filePath): printUsage() else: tm…

Java数据结构、list集合、ArrayList集合、LinkedList集合、Vector集合

数据结构&#xff1a; 数据存储的常用结构有&#xff1a;栈、队列、数组、链表、红黑树。 栈&#xff1a;stack,又称堆栈&#xff0c;它是运算受限的线性表&#xff0c;其限制是仅允许在标的一端进行插入和删除操作&#xff0c;不允许在其他任何位置进行添加、查找、删除等操…

第11章 GUI Page436 使用缓冲DC, wxBufferedPaintDC

所谓“缓冲DC”&#xff0c;是指将所有图元都先划到一个人眼看不到的“设备上下文”之上&#xff0c;最后再一次性复制到真正的屏幕DC之上&#xff0c;这样我们就看不到中间画的过程了&#xff0c;也就不会感到闪烁了。 注意&#xff0c;这时不能解除ScrolledWindow1的背景擦除…

Tomcat+JSP经典配置实例

经常看到jsp的初学者问tomcat下如何配置jsp、servlet和bean的问题&#xff0c;于是总结了一下如何tomcat下配置jsp、servlet和ben&#xff0c;希望对那些初学者有所帮助。    一、开发环境配置    第一步&#xff1a;下载j2sdk和tomcat&#xff1a;到sun官方站&#xf…

python海龟编辑器画小汽车_【海龟编辑器下载】海龟编辑器(Python编辑器) v1.3.4 官方免费版-趣致软件园...

海龟编辑器是一款专为广大少儿打造的Python编辑器&#xff0c;该软件功能强大且使用便利&#xff0c;可以帮助孩子们以搭积木的方式来学习Python&#xff0c;并且支持Python代码和图形化积木的双向互相转译&#xff0c;不但可以有效提升孩子的学习兴趣&#xff0c;而且还能够降…

.net 页面之间传值的几种方法!(转)

QueryString传值&#xff1a;1. 这是最简单的传值方式&#xff0c;但缺点是传的值会显示在浏览器的地址栏中且不能传递对象&#xff0c;只适用于传递简单的且安全性要求不高的整数值&#xff0c;例如&#xff1a; 2. 新建一个WEB项目&#xff0c;添加一个页面命名为Test1&#…

微信小程序中组件的使用

微信小程序中组件的使用&#xff1a; 微信小程序中组件定义在项目根目录下components文件夹下&#xff0c;在页面使用的时候需要在页面的json文件中声明&#xff0c;如 父组件向子组件传值及子组件向父组件传值&#xff1a; 父组件wxml中&#xff1a;通过属性绑定值的方式向…

mysql允许所有用户连接_Mysql权限控制 - 允许用户远程连接

Mysql为了安全性&#xff0c;在默认情况下用户只允许在本地登录&#xff0c;可是在有此情况下&#xff0c;还是需要使用用户进行远程连接&#xff0c;因此为了使其可以远程需要进行如下操作&#xff1a;一、允许root用户在任何地方进行远程登录&#xff0c;并具有所有库任何操作…

mysql id 不在集合里面_MySQL,PHP:从表中选择*,其中id不在数组中

所以我现在有一个数据库表&#xff0c;我试图选择所有记录&#xff0c;除了包含在我所做的数组中的所有记录。正如一些背景方面&#xff1a;MySQL&#xff0c;PHP&#xff1a;从表中选择*&#xff0c;其中id不在数组中在有问题的数据库表的结构是&#xff1a;server_status:id …

#并行优化# 容错算法 (Fault Tolerant)

容错算法 (Fault Tolerant) 容错算法 (Fault Tolerant) 转载于:https://www.cnblogs.com/daijkstra/p/4105305.html

python人工智能pdf_800G人工智能学习资料:AI电子书+Python语言入门+教程+机器学习等限时免费领取!...

人工智能的热潮在今年再创高峰。无论是政策上还是资本市场上&#xff0c;抑或是我们日常生活中&#xff0c;关于人工智能的消息从未间断&#xff0c;逐渐占据我们每个人的视线。可以看出&#xff0c;人工智能得到了由上至下&#xff0c;国内国外的一致支持。 基于这股热潮&…

mysql rpm 安装多实例_MySQL多实例安装

MySQL多实例安装1、配置3306实例1.1、查询服务器上是否已经安装的mysql[rootmasterMySQL-5.6.25-1.el6.x86_64.rpm-bundle]# rpm -aq | grep mysqlmysql-server-5.1.66-2.el6_3.x86_64mysql-libs-5.1.66-2.el6_3.x86_64mysql-devel-5.1.66-2.el6_3.x86_64qt-mysql-4.6.2-25.el6…

如何保证交叉表编译器和目标系统版本一致_嵌入式系统词汇表

欢迎FPGA工程师加入官方微信技术群点击蓝字关注我们FPGA之家-中国最好最大的FPGA纯工程师社群AASIC(专用集成电路) Application-Specific Integrated Circuit. A piece of custom-designed hardware in a chip. 专用集成电路。一个在一个芯片上定制设计的硬件。address bus (地…