html5 canvas结构基础
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小白童鞋的canvas之基本配置篇</title>
<script src="js/modernizr.js"></script>
</head> <body>
<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="#ff0000";
context.fillRect(0,0,400,400);
context.fillStyle="#000000";
context.font="20px _sans";
context.textBaseline="top";
context.fillText("如有疑问加QQ:1035417613;小白童鞋",0,0);
}
} </script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!!
</canvas>
</body>
</html>
http://files.cnblogs.com/files/LoveOrHate/canvas1-1.rar(DEMO下载)
window.addEventListener('load',eventWindowLoaded,false);
脚本执行的过程中需要第一个监听load对象
在html页面加载结束时发生
事件load
事件处理器函数eventWindowLoaded
theCanvas.getContext("2d")获取2d上下文
modernizr.js是个不错的东西可以检测支持情况
我是在这里下的(吐槽一下链接有点长)
modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load
html5 canvas结构基础的更多相关文章
- HTML5 Canvas(基础知识)
最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...
- [HTML5 Canvas学习] 基础知识
HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...
- HTML5 CANVAS制图 基础总结
一.基本绘图 首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...
- HTML5 canvas之基础篇(一)
一.检测浏览器是否支持canvas if( !canvas || !canvas.getContext){ return; } 也可以使用modernizr.js库,Modernizr是一个易用的轻量 ...
- HTML5 canvas绘图基础(电子名片生成器源码)
创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...
- Html5 Canvas动画基础碰撞检测的实现
在Canvas中进行碰撞检测,大家往往直接采用游戏引擎(Cocos2d-JS.Egret)或物理引擎(Box2D)内置的碰撞检测功能,好奇的你有思考过它们的内部运行机制吗?下面将针对基本的碰撞检测技术 ...
- HTML5 Canvas绘图基础
- HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...
随机推荐
- 利用HOG+SVM实现行人检测
利用HOG+SVM实现行人检测 很久以前做的行人检测,现在稍加温习,上传记录一下. 首先解析视频,提取视频的每一帧形成图片存到磁盘.代码如下 import os import cv2 videos_s ...
- dokuwiki编辑器修改-color插件-添加按钮
需求 dokuwiki的编辑工具栏是以 MediaWiki 的为基础发展来的. 在它的编辑器color插件的颜色按钮中,我想添加新的按钮功能.如红色字体黄色背景的修饰,类似于涂中文字强调的意思. 步骤 ...
- 详细聊聊k8s deployment的滚动更新(一)
一.知识准备 ● 本文详细探索deployment在滚动更新时候的行为 二.环境准备 组件 版本 OS Ubuntu 18.04.1 LTS docker 18.06.0-ce 三.准备镜像 首先准备 ...
- 微软职位内部推荐-Sr. SE - Office incubation
微软近期Open的职位: Senior Software Engineer-Office Incubation Office China team is looking for experienced ...
- Beta任务项录入
今天PM把任务项整理写入TFS中,明天开始正式开发工作:
- 作业三:LINUX内核的启动过程
作业三:LINUX内核的启动过程 一.使用GDB跟踪内核从start_kernel到init进程启动(附实验截图) (一)使用自己的Linux系统环境搭建MenuOS的过程 下载内核源代码编译内核 c ...
- 软工团队(hello world)组员介绍
姜中希:喜欢编程,善于交际. 周盼超:喜欢编程. 王昭博:思路比较清晰,可以明确开发步骤. 刘洪阳:思想笔记广泛,可以把很多有关联的东西结合起来. 刘双勃:喜欢编程,踏实,比较容易坚持.
- mac 关闭显示器 & 快捷键
mac 关闭显示器 & 快捷键 https://support.apple.com/zh-cn/HT201236 https://support.apple.com/zh-cn/HT20705 ...
- Delphi中快速修改变量名称
鼠标左键选择需要修改的范围,左侧会出现一个同步编辑模式(Sync Edit Mode),快捷键:CTRL+SHIFT+J,它可以让我们清楚地编写或改写多个同一参数.
- 【版本管理】git分支管理
创建与合并分支: 首先,我们创建dev分支,然后切换到dev分支: git checkout -b dev,命令加上-b参数表示创建并切换, 相当于以下两条命令: git branch dev: gi ...