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 ...
随机推荐
- Change Line Type in OpenCascade
Change Line Type in OpenCascade eryar@163.com 关键字KeyWords:OpenCascade,Line Aspect, Line Type 在OpenCa ...
- Minor【 PHP框架】3.路由、控制器、视图
框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...
- C标准库-数值字符串转换与内存分配函数
原文链接:http://www.orlion.ga/977/ 一.数值字符串转换函数 #include <stdlib.h> int atoi(const char *nptr); dou ...
- nodejs 批量修改、删除
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQhCAIAAABDaAVHAAAgAElEQVR4nOydeXxU5aH359733vd9b/ ...
- 深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame
× 目录 [1]引入 [2]特点 [3]使用[4]兼容[5]应用 前面的话 与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好 ...
- 效率和协作工具--OneNote
身边有很多的朋友,都是在电脑上办公.除了会计和外贸相关的工作,用到Excel,公司的ERP比较多.日常工作中,特别是事情一多,大家基本不知道从何处完成今天的任务,而已有时经常丢三落四.同事在QQ或者M ...
- linux内核中的每cpu变量
一.linux中的每cpu变量 看linux内核代码的时候,会发现大量的per_cpu(name, cpu),get_cpu_var(name)等出现cpu字眼的语句.从语句的意思可以看出是要使用与当 ...
- 设计窘境：来自 Repository 的一丝线索，Domain Model 再重新设计
写在前面 阅读目录: 疑惑解读 设计窘境 一幅图的灵感 为嘛还是你-Repository 后记 上一篇<No zuo no die:DDD 应对具体业务场景,Domain Model 重新设计& ...
- JS Div滚动，下拉框添加属性，年月日下拉条
创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...
- Nodejs之MEAN栈开发（四）---- form验证及图片上传
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...