仅仅只是一个简单的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. notepad++ 正则学习记录

    原文 表达式 说明 \t 制表符. \n 新行. . 匹配任意字符. | 匹配表达式左边和右边的字符. 例如, "ab|bc" 匹配 "ab" 或者 " ...

  2. Tests for normality正态分布检验

    欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/ ...

  3. Tensorflow BatchNormalization详解：3_使用tf.layers高级函数来构建带有BatchNormalization的神经网络

    Batch Normalization: 使用tf.layers高级函数来构建带有Batch Normalization的神经网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 吴 ...

  4. Vue.js随笔四(方法的声明和使用)

    1.首先你需要新建路由,这个就不多说了 2.然后在你的新的.vue里面需要如下所示的添加methods:{方法},然后按钮的里面你会看到v-on:click,这就是点击这个按钮会触发的动作,这个就是触 ...

  5. 2-sat Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) D

    http://codeforces.com/contest/782/problem/D 题意: 每个队有两种队名,问有没有满足以下两个条件的命名方法: ①任意两个队的名字不相同. ②若某个队 A 选用 ...

  6. GridControl详解（七）事件

    private void gridView1_RowCellClick(object sender, DevExpress.XtraGrid.Views.Grid.RowCellClickEventA ...

  7. 在Unity中实现屏幕空间反射Screen Space Reflection（1）

    本篇文章我会介绍一下我自己在Unity中实现的SSR效果 出发点是理解SSR效果的原理,因此最终效果不是非常完美的(代码都是够用就行),但是从学习的角度来说足以学习到SSR中的核心算法. 如果对核心算 ...

  8. Callback2.0

    Callback定义? a callback is a piece of executable code that is passed as an argument to other code, wh ...

  9. perl6 HTTP::UserAgent (3) JSON

    如果一个 URL 要求POST数据是 JSON格式的, 那我们要怎么发送数据呢? 第一种: HTTP::Request 上一篇说到, 发送 POST 数据, 可以: . $ua.post(url, % ...

  10. 省市区ajax联动

    function setCity1(){ var areaId1 = $('#areaId1').val(); var cityId1 = $('#cityId1'); var cityOpt = $ ...