html5Canvas基本特性的示例代码分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了html5Canvas基本特性的示例代码分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6255字，纯文字阅读大概需要9分钟。
内容图文
http://www.gxlcms.com/wiki/1118.html" target="_blank">html5 Canvas 介绍canvas的基本属性与方法：width,height,getContext()等；
通过width与height来获取和设置当前canvas的宽度、高度；
通过getContext()方法来获取当前画布的绘图环境（context）；
context=canvas.getContext("2d");
context包含了我们需要的，在canvas上绘图的所有方法及属性；
context的笛卡尔坐标系统中，canvas的左上角为原点；从原点往右为X轴的正向，往下为Y轴的正向；
关于坐标的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>s3</title>
<script type="text/javascript" src="../script/modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {
};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
if(!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
function drawScreen() {
//以下代码来源于<http://www.cnblogs.com/nothingbrother/archive/2011/12/23/2299856.html>
for(var x = 0.5; x < 550; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 400);
}
for(var y = 0.5; y < 400; y += 10) {
context.moveTo(0, y);
context.lineTo(550, y);
}
context.strokeStyle = "#cecece";
context.stroke();
context.beginPath();
context.moveTo(50, 150);
context.lineTo(300, 150);
context.moveTo(250, 100);
context.lineTo(300, 150);
context.moveTo(300, 50);
context.lineTo(250, 100);
context.moveTo(450, 200);
context.lineTo(300, 50);
/*symmetry*/
context.moveTo(50, 250);
context.lineTo(300, 250);
context.moveTo(250, 300);
context.lineTo(300, 250);
context.moveTo(300, 350);
context.lineTo(250, 300);
context.moveTo(450, 200);
context.lineTo(300, 350);
/*end*/
context.moveTo(50, 150);
context.lineTo(50, 250);
/*write coordinate*/
context.font = "bold 12px sans-serif";
context.fillText("( 0 , 0 )", 8, 5);
context.fillText("(50, 150)", 58, 155);
context.fillText("(300, 150)", 308, 155);
context.fillText("(250, 100)", 258, 105);
context.fillText("(300, 150)", 308, 155);
context.fillText("(300, 50)", 308, 55);
context.fillText("(50, 250)", 58, 255);
context.fillText("(300, 250)", 308, 255);
context.fillText("(250, 350)", 258, 355);
context.fillText("(450, 200)", 458, 205);
context.strokeStyle = "#f00";
context.stroke();
}
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="550" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>context的所有属性及方法都是与current state结合使用；
我们在真正理解Canvas是如何工作的之前，current state是必须要掌握的一个概念；
current state 实事上是一个绘图状态的堆栈，这个堆栈从全局范围内适用于整个canvas;
我们可以操作如下一些状态：
Transformation matrix（变换矩阵）
Methods:scale, rotate, transform, and translate
Clipping region（区域裁剪）
Method:clip()
Properties of the context（context属性）
Properties: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, line Join, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, global CompositeOperation, font, textAlign, and textBaseline.
先简单了解一下，会在以后的文章中对这些属性、方法的使用，慢慢剖析；
国外[oreilly]编写的一个小程序（猜字母）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>s1</title>
<script type="text/javascript" src="../script/modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
var Debugger = function() {
};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function canvasSupport() {
return Modernizr.canvas;
}
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
var guesses = 0;
var message = "Guess The Letter From a (lower) to z (higher)";
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;
if(!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
initGame();
function initGame() {
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
guesses = 0;
lettersGuessed = [];
gameOver = false;
window.addEventListener("keyup", eventKeyPressed, true);
drawScreen();
}
function eventKeyPressed(e) {
if(!gameOver) {
var letterPressed = String.fromCharCode(e.keyCode);
letterPressed = letterPressed.toLowerCase();
guesses++;
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() {
//Background
context.fillStyle = "#ffffaa";
context.fillRect(0, 0, 500, 300);
//Box
context.strokeStyle = "#000000";
context.strokeRect(5, 5, 490, 290);
context.textBaseline = "top";
//Date
context.fillStyle = "#000000";
context.font = "10px _sans";
context.fillText(today, 150, 10);
//Message
context.fillStyle = "#FF0000";
context.font = "14px _sans";
context.fillText(message, 125, 30);
//Guesses
context.fillStyle = "#109910";
context.font = "16px _sans";
context.fillText('Guesses: ' + guesses, 215, 50);
//Higher Or Lower
context.fillStyle = "#000000";
context.font = "16px _sans";
context.fillText("Higher Or Lower: " + higherOrLower, 150, 125);
//Letters Guessed
context.fillStyle = "#FF0000";
context.font = "16px _sans";
context.fillText("Letters Guessed: " + lettersGuessed.toString(), 10, 260);
if(gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("You Got It!", 150, 180);
}
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
以上就是html5 Canvas基本特性的示例代码分享的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的html5Canvas基本特性的示例代码分享全部内容，希望文章能够帮你解决html5Canvas基本特性的示例代码分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】