HTML5 canvas之基础篇(一)
一.检测浏览器是否支持canvas
if( !canvas || !canvas.getContext){
return;
}
也可以使用modernizr.js库,Modernizr是一个易用的轻量级库,可以检测各种web技术的支持情况。
二.canvas的属性
主要属性: id
:id在Javascript代码中用来指定特定的<canvas>
标签的名字; width
:画布的宽度,以像素为单位; height
:画布的高度,以像素为单位。
其他属性:tableindex
, title
, class
, accesskey
, dir
, draggable
, hidden
.
三.获取2D环境
通过调用Canvas对象的getContext()
方法,可以获得HTML5 的2D环境对象(CanvasRenderingContext2D).该对象包含了在画布上绘图所需的所有方法和属性。画布的左上角为原点(0,0),坐标轴向下、向右为正方向。
获取了2D环境之后可以干什么呢?能做的事有很多,比如使用strokeStyle
, fillStyle
,globalAlpha
, lineWidth
, lineCap
, line
, join
, miterLimit
, shadowOffsetX
,
shadowOffsetY
, shadowBlur
, shadowColor
, global
, font
, CompositeOperation
, textAlign
, textBaseline
这些属性以及一些方法来制作游戏和动画。
四.使用canvas
.在html文档中的写法,通常是这样的:
<canvas id="canvas" width="500px" height="500px"></canvas>
注:对于canvas的宽和高,要在标签里定义,因为canvas的属性width和height和CSS里的width和height是不一样 的,canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。而css的width和height是canvas在 浏览器中被渲染的高度和宽度。但是可以利用css的width和height来缩放canvas。
在javascript里获取canvas对象及2D环境:
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2D");
五.实际应用(猜字母游戏:计算机随机给出一个字母,用户猜给出的字母是什么,如果不对,会提示你猜的偏大还是偏小)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
window.addEventListener("load" , eventWindowLoad, false);
var Debugger = function() {};
Debugger.log = function (message) { //输出信息调试
try{
console.log(message);
}catch(exception){
return;
}
} function eventWindowLoad() {
canvasApp();
} function canvasApp() {
if( !canvas || !canvas.getContext ){
return;
}else{
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
var guess = 0;
var message
var letters = [
"a", "b", "c", "d", "e", "f","g","h","i", "j", "k", "l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"
];
var today = new Date();
var letterToGuess = "";
var higherOrLower = "";
var lettersGuessed;
var gameOver = false; initGame(); function initGame() {
var letterIndex = Math.floor(Math.random()*letters.length);
letterToGuess = letters[letterIndex];
guess = 0;
lettersGuessed = [];
gameOver = false;
window.addEventListener("keydown", eventKeyPressed, true);
drawScreen();
} function eventKeyPressed(e) {
if(!gameOver){
var letterPressed = String.fromCharCode(e.keyCode);
letterPressed = letterPressed.toLowerCase();
guess++;
lettersGuessed.push(letterPressed); if(letterPressed == letterToGuess){
gameOver = true;
}else{
letterIndex = letters.indexOf(letterToGuess);
guessIndex = letters.indexOf(letterPressed); Debugger.log(guessIndex);
if(guessIndex < 0){
higherOrLower = "That is not a letter";
}else if(guessIndex >letterIndex){
higherOrLower = "Lower";
}else{
higherOrLower = "Higher";
}
}
drawScreen();
}
}
function drawScreen() {
context.fillStyle = "#ffffaa";
context.fillRect(0, 0, 500, 300); context.strokeStyle = "#000000";
context.strokeRect(5,5,490, 290); context.textBaseLine = "top";
context.fillStyle = "#000000";
context.font = "10px";
context.fillText(today, 150, 10); context.fillStyle = "#ff0000";
context.font = "14px";
context.fillText(message, 125, 30); context.fillStyle = "#109910";
context.font = "16px";
context.fillText("Guesses:" + guess, 125, 50); context.fillStyle = "#000000";
context.font = "16px";
context.fillText("higherOrLower:" + higherOrLower, 150, 125); context.fillStyle = "#ff0000";
context.font = "16px";
context.fillText("Letter Guessed:" + lettersGuessed.toString(), 10, 260); if(gameOver){
context.fillStyle = "#ff0000";
context.font = "40px";
context.fillText ("You got it!", 150, 180);
}
}
}
} </script>
</html>
上例用到的知识点:
context.fillStyle
:定义填充的颜色;context.strokeStyle
:定义填充边缘的颜色; context.fillRect(x, y,width,height)
:绘制一个矩形,x
是绘制的矩形的左上角的x坐标,y
是绘制的矩形的左上角的y坐标,width
:是绘制的矩形的宽度,height
是绘制的矩形的高度;context.font
:定义绘制文本的字号 和 字体;context.textBaseLine
:定义文本的对齐的基准线,取值有top
,bottom
,middle
,hanging
,ideographic;
context.fillText(text, x, y)
:定义要绘制的文本,text
是要绘制的文本内容,x
是文本放置的x坐标,y
是文本放置的y坐标。
HTML5 canvas之基础篇(一)的更多相关文章
- html5 canvas贝塞尔曲线篇(下)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas贝塞尔曲线篇(上)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 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结构基础
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5 canvas绘图基础(电子名片生成器源码)
创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...
- Html5 Canvas动画基础碰撞检测的实现
在Canvas中进行碰撞检测,大家往往直接采用游戏引擎(Cocos2d-JS.Egret)或物理引擎(Box2D)内置的碰撞检测功能,好奇的你有思考过它们的内部运行机制吗?下面将针对基本的碰撞检测技术 ...
- HTML5 Canvas绘图基础
随机推荐
- HTTP 协议介绍
HTTP 协议规定了浏览器和服务器之间互相通信的规则. 请求协议: 规定了客户端发送给服务器的内容格式 响应协议: 服务器发送给客户端的内容格式 请求协议 请求协议格式: 请求行 多个请求头信息(属性 ...
- Python高级教程-filter
Python中的filter() Python内建的filter()函数用于过滤序列.和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函数依次 ...
- npm更新和nodejs更新
npm更新和nodejs更新 更新你已经安装的NPM库,这个很简单,只需要运行. npm update -g 更新Nodejs自身.一直依赖我都是下载最新版的源码,然后make install,及其繁 ...
- Github的markdwon如何使用表情符(Emoji)?表情包大全
如输入 :smile: 会输出
- 0502-Hystrix保护应用-简介,使用,健康指标等
一.概述 参看地址:https://cloud.spring.io/spring-cloud-static/Edgware.SR3/single/spring-cloud.html#_circuit_ ...
- node.js---sails项目开发(2)
1.安装mongoDB,这里用brew安装 brew install mongodb 2. 启动数据库 mongod 3.再打开一个终端,连接数据库 mongo 4.启动成功后,接下来就是新建一个数据 ...
- django的安装、文件解释与基本命令
1.安装 pip install django==1.9.8 2.新建一个django project django-admin startproject mysite #创建工程文件 cd mysi ...
- Xcode 错误问题以及解决方法(后期遇到还会添加)
1,/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhon ...
- 数据结构&算法(一)_堆、栈(堆栈)、队列、链表
堆: ①堆通常是一个可以被看做一棵树的数组对象.堆总是满足下列性质: ·堆中某个节点的值总是不大于或不小于其父节点的值: ·堆总是一棵完全二叉树.将根节点最大的堆叫做最大堆或大根堆,根节点最小的堆叫做 ...
- 搭建Mac OS X下cocos2d-x的Android开发环境
版本 Cocos2d-x: cocos2d-2.1beta3-x-2.1.1 OS X: 10.8 Android ADT Bundle: v21.1.0 Android NDK: android-n ...