《HTML5 Canvas开发详解》——第2章 在Canvas上绘图2.1 本章基本文件设置

  1. 云栖社区>
  2. 博客>
  3. 正文

《HTML5 Canvas开发详解》——第2章 在Canvas上绘图2.1 本章基本文件设置

异步社区 2017-05-02 14:25:00 浏览1198
展开阅读全文

本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第2章,第2.1节,作者: 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

第2章 在Canvas上绘图

HTML5 Canvas的使用是以强大的绘图、着色和基本二维形状变换为基础的,然而可供选择的内建形状相对有限,程序员可以通过一组称做路径的线段来绘制出想要的形状,“2.4使用路径创建线段”将涉及相关内容。

提示:
可以采用在线形式很好地了解HTML5 Canvas API。WSC网站上有详尽且不断更新的参考,具体描述了Canvas 2D绘图API的功能。

然而,这个在线参考缺少使用API的具体例子。本书避免简单地介绍各个参数的使用,将花时间通过创建示例来解释并探索尽可能多的功能。

2.1 本章基本文件设置

如同开始讲到绘图API时那样,本章中的示例也将使用相同的基本文件设置,具体如下。这段代码为本书所有的示例的基础,使用时只需改变drawScreen()函数的内容即可。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ch2BaseFile - Template For Chapter 2 Examples</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded(){

  canvasApp();
}

function canvasSupport (){
   return Modernizr.canvas;
}

function canvasApp(){

if (!canvasSupport()){
     return;
   }else{
   var theCanvas = document.getElementById("canvas");
   var context = theCanvas.getContext("2d");
  }

  drawScreen();

  function drawScreen(){
   //改变这里
   context.fillStyle = '#aaaaaa';
   context.fillRect(0, 0, 200, 200);
   context.fillStyle = '#000000';
   context.font = '20px _sans';
   context.textBaseline = 'top';
   context.fillText ("Canvas!", 0, 0);

  }
}

</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

网友评论

登录后评论
0/500
评论
异步社区
+ 关注