HTML5 Canvas 初探
仅仅只是一个简单的hello world.
js代码很简单:
- <!DOCTYPE HTML>
- <html lang="cn">
- <head>
- <title> canvas1 </title>
- <meta charset="UTF-8">
- //@author 杨虹昌
- <script type="text/javascript">
- //测试浏览器是否支持canvas
- function canvasSupport(){
- return !!document.createElement('canvas').getContext;
- }
- //添加window事件,文档加载完成之后执行此函数
- window.addEventListener('load',eventWindowLoaded,false);
- //输出日志信息对象简单封装
- var Debugger=function(){};
- Debugger.log=function(message){
- try{
- console.log(message);
- }catch(e){
- return;
- }
- }
- //窗体加载后执行函数
- function eventWindowLoaded(){
- canvasApp();
- }
- //
- function canvasApp(){
- if(!canvasSupport()){
- return;
- }
- //获取html元素id为theCanvas的画布元素
- var theCanvas=document.getElementById('theCanvas');
- //获得2D上下文,注意:此处2d只能是小写,大写则为undefined,很郁闷为何不做静态常量,也许是我不知道吧
- var context=theCanvas.getContext('2d');
- //输出信息
- Debugger.log('Drawing Canvas');
- //画对应类容
- function drawScreen(){
- //background 设置背景颜色
- context.fillStyle="#ffffaa";
- context.fillRect(0,0,500,300);
- //font 设置字体
- context.fillStyle="#000000";
- context.font="20px_sans";
- context.textBaseline="top";
- context.fillText("Hello World",195,80);
- //image 加载一张图片并输出到画布
- var helloWorldImage=new Image();
- helloWorldImage.src="http://avatar.csdn.net/0/E/9/1_yhc13429826359.jpg";
- helloWorldImage.onload=function(){
- context.drawImage(helloWorldImage,160,130);
- };
- //border 边框设置
- context.strokeStyle="#000000";
- context.strokeRect(5,5,490,290);
- }
- drawScreen();
- }
- </script>
- </head>
- <body>
- <div style="position:absolute;top:50px;left:50px;">
- <canvas id="theCanvas" width="500" height="500">
- 浏览器不支持html5 canvas,建议使用chrome,FF
- </canvas>
- </body>
- </html>
最终效果图:
只是一个最简单的例子,后续会详细解释.
HTML5 Canvas 初探的更多相关文章
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- html5 canvas常用api总结(一)
1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- 自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
- canvas初探2
2.2 canvas的绘图环境 canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能. 目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的 ...
- HTML5 Canvas彩色小球碰撞运动特效
脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ ...
随机推荐
- 前端PHP入门-031-文件上传-六脉神剑
php.ini的设置 php.ini的文件太多,找不到的时候你可以使用 Ctrl+F 搜索相关配置项. 配置项 功能说明 file_uploads on 为开启文件上传功能,off 为关闭 post_ ...
- numpy数组中冒号和负号的含义
numpy数组中":"和"-"的意义 觉得有用的话,欢迎一起讨论相互学习~Follow Me 在实际使用numpy时,我们常常会使用numpy数组的-1维度和& ...
- js控制treeview默认展开
bootStrapTreeview 在bootstrap的treeview官网,可以找到这个方法,用js控制可以写成:$('#xxx').treeview('collapseNode',{silent ...
- 解决tomcat占用8080端口问题图文详解
相信很多朋友都遇到过这样的问题吧,tomcat死机了,重启eclipse之后,发现 Several ports (8080, 8009) required by Tomcat v6.0 Server ...
- angularJs 跨控制器与跨页面传值
虽然网上概括了四种或更多的传值方式,但我现在用的顺手的就两种 首先要知道AngularJs可以构建一个单页面应用程序,所以我划分为跨控制器传值 和 跨页面传值 两类 1.跨控制器传值—— $rootS ...
- UVA 10479 The Hendrie Sequence
https://vjudge.net/problem/UVA-10479 打表找规律: 1.根据n可以确定第n项在上表中第i行 2.减去前i-1行,就得到了n在第i行的第j个 3.第i行的规律:1个i ...
- python常用函数库及模块巧妙用法汇总
在用python编写脚本或写程序过程中总要遇到一些对大文件或数据进行排序,计算,循环跌代等.我想下面这些函数库一定能用得到,总结如下:便于以后备查 列表去重(传说是列表去重最高效的方法): al = ...
- Linux 安装tomcat,搭建web app运行环境
Tomcat 8 下载地址:https://tomcat.apache.org/download-80.cgi 解压tomcat:tar -xf apache-tomcat-8.5.31.tar.gz ...
- LintCode 406: Minimum Size
LintCode 406: Minimum Size 题目描述 给定一个由 n 个整数组成的数组和一个正整数 s ,请找出该数组中满足其和 ≥ s 的最小长度子数组.如果无解,则返回 -1. 样例 给 ...
- 【CodeForces】671 C. Ultimate Weirdness of an Array
[题目]C. Ultimate Weirdness of an Array [题意]给定长度为n的正整数序列,定义一个序列的价值为max(gcd(ai,aj)),1<=i<j<=n, ...