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

简介:

本节书摘来自异步社区《HTML5 canvas开发详解(第2版)》一书中的第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.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>
相关文章
|
1月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
59 29
|
1月前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
18 1
|
2月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
53 5
|
3月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
40 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
3月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
56 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
3月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
46 5
|
4月前
|
Web App开发 前端开发 搜索推荐
创建HTML文件
【10月更文挑战第14天】创建HTML文件
93 4
|
4月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
413 0
|
Web App开发 JavaScript Java
XWalkView+html 开发Android应用
在Android开发中有时候为了开发简洁和方便移植,采用了Html+WebView的开发模式,然而Android自带的WebView控件是调用的本机的浏览器内核,有些版本较老的手机浏览器和手机性能都不能满足需求(表现在html5不兼容、体验不流畅等地方)。
2292 0
|
JavaScript 前端开发 Java
html5 开发android
引用:http://www.cnblogs.com/qianru/archive/2012/02/27/2369526.html ● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi。
1007 0

热门文章

最新文章