仅仅只是一个简单的hello world.

js代码很简单:

  1. <!DOCTYPE HTML>
  2. <html lang="cn">
  3. <head>
  4. <title> canvas1 </title>
  5. <meta charset="UTF-8">
  1. //@author 杨虹昌
  2. <script type="text/javascript">
  3. //测试浏览器是否支持canvas
  4. function canvasSupport(){
  5. return   !!document.createElement('canvas').getContext;
  6. }
  7. //添加window事件,文档加载完成之后执行此函数
  8. window.addEventListener('load',eventWindowLoaded,false);
  9. //输出日志信息对象简单封装
  10. var Debugger=function(){};
  11. Debugger.log=function(message){
  12. try{
  13. console.log(message);
  14. }catch(e){
  15. return;
  16. }
  17. }
  18. //窗体加载后执行函数
  19. function eventWindowLoaded(){
  20. canvasApp();
  21. }
  22. //
  23. function canvasApp(){
  24. if(!canvasSupport()){
  25. return;
  26. }
  27. //获取html元素id为theCanvas的画布元素
  28. var theCanvas=document.getElementById('theCanvas');
  29. //获得2D上下文,注意:此处2d只能是小写,大写则为undefined,很郁闷为何不做静态常量,也许是我不知道吧
  30. var context=theCanvas.getContext('2d');
  31. //输出信息
  32. Debugger.log('Drawing Canvas');
  33. //画对应类容
  34. function drawScreen(){
  35. //background  设置背景颜色
  36. context.fillStyle="#ffffaa";
  37. context.fillRect(0,0,500,300);
  38. //font     设置字体
  39. context.fillStyle="#000000";
  40. context.font="20px_sans";
  41. context.textBaseline="top";
  42. context.fillText("Hello World",195,80);
  43. //image   加载一张图片并输出到画布
  44. var helloWorldImage=new Image();
  45. helloWorldImage.src="http://avatar.csdn.net/0/E/9/1_yhc13429826359.jpg";
  46. helloWorldImage.onload=function(){
  47. context.drawImage(helloWorldImage,160,130);
  48. };
  49. //border 边框设置
  50. context.strokeStyle="#000000";
  51. context.strokeRect(5,5,490,290);
  52. }
  53. drawScreen();
  54. }
  55. </script>
  56. </head>
  57. <body>
  58. <div style="position:absolute;top:50px;left:50px;">
  59. <canvas id="theCanvas" width="500" height="500">
  60. 浏览器不支持html5 canvas,建议使用chrome,FF
  61. </canvas>
  62. </body>
  63. </html>

最终效果图:

只是一个最简单的例子,后续会详细解释.

HTML5 Canvas 初探的更多相关文章

  1. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  2. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  3. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  4. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  5. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  6. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  7. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  8. canvas初探2

    2.2 canvas的绘图环境 canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能. 目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的 ...

  9. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

随机推荐

  1. isNaN与parseInt/parseFloat

    isNaN 返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字). NaN 即 Not a Number isNaN(numValue) 必选项 numvalue 参数为要检查 ...

  2. 维护后面的position + 离线 + 线段树 bzoj 3585

    3585: mex Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 918  Solved: 481[Submit][Status][Discuss] ...

  3. HDU 2582 规律 素因子

    定义$Gcd(n)=gcd(\binom{n}{1},\binom{n}{2}...\binom{n}{n-1})$,$f(n)=\sum_{i=3}^{n}{Gcd(i)}$,其中$(3<=n ...

  4. Shiro实战教程（一）

    Shiro完整架构图 Shiro认证过程 Shiro授权的内部处理机制 Shiro 支持三种方式的授权 1.编程式:通过写if/else 授权代码块完成: Subject subject = Secu ...

  5. Centos7系统环境下Solr之Java实战（二）制定中文分析器、配置业务域

    制定中文分析器 1.把IKAnalyzer2012FF_u1.jar添加到solr工程的lib目录下 2.把扩展词典.配置文件放到solr工程的WEB-INF/classes目录下. 配置一个Fiel ...

  6. json属性名为什么要双引号？

    原因一: 更加规范,利于解析 原因二: 避免class等关键字引起的不兼容问题 原因三: 可能也是最隐晦的: var a = 00; var b = {00: 12}; a in b; --> ...

  7. IO流-文件的写入和读取

    1.文件写入 类: FileWriter继承自Writer(字符流基类之一,另外一个为Reader) 方法: writer(参数); 根据参数可以写入字符.字符数组.字符数组中的一部分.整型.字符串. ...

  8. 【CodeForces】901 B. GCD of Polynomials

    [题目]B. GCD of Polynomials [题意]给定n,要求两个最高次项不超过n的多项式(第一个>第二个),使得到它们GCD的辗转次数为n.n<=150. [算法]构造 [题解 ...

  9. 通用标签、属性（body属性、路径、格式控制）

    通用标签.属性 一.body属性 1.bgcolor属性:网页背景颜色 2.text属性:规定文档中所有文本的颜色. 3.background属性:规定文档的背景图像. 二.路径 1.绝对路径: 从根 ...

  10. 天梯赛 L2-001 紧急救援 （最短路 dij）

    作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两个城市的快速道路长度都标在地图上.当其他城市有紧急求 ...