Pro HTML5 Programming(Second Edition)2.Canvas API（2）
1.在页面中加入canvas元素
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test02</title>
<script type="text/javascript" src="Test02.js"></script>
</head>
<body>
<!-- <div id="support"></div> -->
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
</body>
</html>
注意：上面的代码中增加了值为“diagonal”的ID特性，这样做可以方便以后通过ID来快速找到canvas元素，对于任何cnavas对象来说，ID特性都是十分重要的，因为对canvas元素的所有操作都是通过脚本代码控制的，没有ID的话，想要找到要操作的canvas元素会很难。
执行效果图如下：
2.在canvas中绘制一条对角线
Test02.js
function drawDiagonal(){
//取得canvas元素及其绘图上下文
var canvas=document.getElementById("diagonal");
var context=canvas.getContext("2d");
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);
//将这条线绘制到canvas上
context.stroke();
}
window.addEventListener("load",drawDiagonal,true);
以上代码展示了使用HTML5 Canvas API的重要流程：
首先通过引用特定的canvas id值来获取对canvas对象的访问权，接着定义一个context变量，调用canvas对象的getContext方法，并且传入希望使用的canvas类型，代码清单中通过传入“2d”俩获取一个二维的上下文。
在代码中调用了三个方法：beginPath，moveTo，lineTo，传入了这条线的起点和终点。方法moveTo和lineTo实际上并不是画线，而是在结束canvas操作的时候，通过调用context.stroke（）方法完成线条的绘制。
注意：
canvas中所有的操作都是通过上下文对象来完成的，所有涉及到视觉输出效果的功能都只能通过上下文对象而不是画布对象来使用。canvas中的很多设置样式和外观的函数不会直接修改显示结果。只有当对路径应用绘制（stroke）或是填充（fill）方法时，结果才会显示出来，否则，只有在显示图像，显示文本或是绘制，填充和清除矩形框的时候，canvas才会马上更新。
Pro HTML5 Programming(Second Edition)2.Canvas API（2）的更多相关文章
- Pro HTML5 Programming(Second Edition)2.Canvas API（1）
1.在使用HTML5的Canvas元素时,考虑到有些浏览器不支持canvas元素,或是不支持HTML5 Canvas API中的某些特性,开发人员最好提供一份替代代码. 以下代码展示如何在canvas ...
- 移动端自动化测试（二）之 Appium常用的API（python）函数介绍
上一章节已经介绍了Appium的环境搭建,其实只要掌握了Appium的工作原理,前期的准备工作和安装过程是比较简单的.那么当我们搭建好Appium环境后接下来做些什么呢?通常思路是开始appium的第 ...
- JS开发HTML5游戏《神奇的六边形》（四）
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...
- 【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘
原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...
- 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
- 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
- HTML5 本地文件操作之FileSystemAPI整理（二）
一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
- 我这么玩Web Api（二）：数据验证，全局数据验证与单元测试
目录 一.模型状态 - ModelState 二.数据注解 - Data Annotations 三.自定义数据注解 四.全局数据验证 五.单元测试 一.模型状态 - ModelState 我理解 ...
- [Android]使用Dagger 2依赖注入 - API（翻译）
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5092525.html 使用Dagger 2依赖注入 - API ...
随机推荐
- 移动端页面按手机屏幕分辨率自动缩放的js
<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...
- GUID简介
GUID (全局唯一标识符) 编辑 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点. ...
- 实战MEF（3）：只导出类的成员
通过前面两篇文章的介绍,相信各位会明白MEF中有不少实用价值.上一文中我们也讨论了导入与导出,对于导出导入,今天我们再深入一点点,嗯,只是深入一点点而已,不会很难的,请大家务必放心,如果大家觉得看文章 ...
- 推荐21款最佳 HTML5 网页游戏
尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等 ...
- Mesh Data Structure in OpenCascade
Mesh Data Structure in OpenCascade eryar@163.com 摘要Abstract:本文对网格数据结构作简要介绍,并结合使用OpenCascade中的数据结构,将网 ...
- OpenCascade Primitives BRep-Cylinder
OpenCascade Primitives BRep-Cylinder eryar@163.com Abstract. BRep is short for Boundary Representati ...
- ASP.NET WebAPi之断点续传下载（下）
前言 上一篇我们穿插了C#的内容,本篇我们继续来讲讲webapi中断点续传的其他情况以及利用webclient来实现断点续传,至此关于webapi断点续传下载以及上传内容都已经全部完结,一直嚷嚷着把S ...
- 亚马逊云架设WordPress博客
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 这篇文章介绍如何在亚马逊云架设WordPress博客.最强的云,加上最流行的建站工 ...
- 手动实现jQuery Tools里面tab功能
平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...
- YII 的源码分析(三)
前面已经看完了启动一个yii程序所要经过的流程,以及渲染一个页面是怎么完成的.今天要分析的是yii是如何处理用户请求的.也就是控制和动作部分. 还是以helloworld为例演示这一过程.我们在地址栏 ...