一.检测浏览器是否支持canvas

if( !canvas || !canvas.getContext){
return;
}

也可以使用modernizr.js库,Modernizr是一个易用的轻量级库,可以检测各种web技术的支持情况。

二.canvas的属性

主要属性id:id在Javascript代码中用来指定特定的<canvas>标签的名字; width:画布的宽度,以像素为单位; height:画布的高度,以像素为单位。

其他属性tableindex,  title,  class,  accesskeydir,  draggable,  hidden.

三.获取2D环境

通过调用Canvas对象的getContext()方法,可以获得HTML5 的2D环境对象(CanvasRenderingContext2D).该对象包含了在画布上绘图所需的所有方法和属性。画布的左上角为原点(0,0),坐标轴向下、向右为正方向。

获取了2D环境之后可以干什么呢?能做的事有很多,比如使用strokeStylefillStyle ,globalAlpha,  lineWidth,  lineCap,  linejoin,  miterLimitshadowOffsetX,

shadowOffsetY,  shadowBlur,  shadowColor,  globalfont,  CompositeOperationtextAligntextBaseline这些属性以及一些方法来制作游戏和动画。

四.使用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之基础篇(一)的更多相关文章

  1. html5 canvas贝塞尔曲线篇(下)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. html5 canvas贝塞尔曲线篇(上)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. HTML5 Canvas(基础知识)

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  4. [HTML5 Canvas学习] 基础知识

    HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...

  5. HTML5 CANVAS制图 基础总结

    一.基本绘图 首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...

  6. html5 canvas结构基础

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. HTML5 canvas绘图基础(电子名片生成器源码)

    创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...

  8. Html5 Canvas动画基础碰撞检测的实现

    在Canvas中进行碰撞检测,大家往往直接采用游戏引擎(Cocos2d-JS.Egret)或物理引擎(Box2D)内置的碰撞检测功能,好奇的你有思考过它们的内部运行机制吗?下面将针对基本的碰撞检测技术 ...

  9. HTML5 Canvas绘图基础

随机推荐

  1. HTTP 协议介绍

    HTTP 协议规定了浏览器和服务器之间互相通信的规则. 请求协议: 规定了客户端发送给服务器的内容格式 响应协议: 服务器发送给客户端的内容格式 请求协议 请求协议格式: 请求行 多个请求头信息(属性 ...

  2. Python高级教程-filter

    Python中的filter() Python内建的filter()函数用于过滤序列.和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函数依次 ...

  3. npm更新和nodejs更新

    npm更新和nodejs更新 更新你已经安装的NPM库,这个很简单,只需要运行. npm update -g 更新Nodejs自身.一直依赖我都是下载最新版的源码,然后make install,及其繁 ...

  4. Github的markdwon如何使用表情符(Emoji)?表情包大全

    如输入 :smile: 会输出  

  5. 0502-Hystrix保护应用-简介,使用,健康指标等

    一.概述 参看地址:https://cloud.spring.io/spring-cloud-static/Edgware.SR3/single/spring-cloud.html#_circuit_ ...

  6. node.js---sails项目开发(2)

    1.安装mongoDB,这里用brew安装 brew install mongodb 2. 启动数据库 mongod 3.再打开一个终端,连接数据库 mongo 4.启动成功后,接下来就是新建一个数据 ...

  7. django的安装、文件解释与基本命令

    1.安装 pip install django==1.9.8 2.新建一个django project django-admin startproject mysite #创建工程文件 cd mysi ...

  8. Xcode 错误问题以及解决方法(后期遇到还会添加)

    1,/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhon ...

  9. 数据结构&算法(一)_堆、栈(堆栈)、队列、链表

    堆: ①堆通常是一个可以被看做一棵树的数组对象.堆总是满足下列性质: ·堆中某个节点的值总是不大于或不小于其父节点的值: ·堆总是一棵完全二叉树.将根节点最大的堆叫做最大堆或大根堆,根节点最小的堆叫做 ...

  10. 搭建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 ...