大佬教程收集整理的这篇文章主要介绍了《HTML5 Canvas核心技术——图形、动画与游戏开发》第三章要点汇总，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title></title> <style type="text/css"> #canvas { border: thin solid red; } </style> </head> <body> <div id="controls"> <SELEct name="fontSELEct" id="fontSELEct"> <option value="幼圆">幼圆</option> <option value="宋体">宋体</option> <option value="黑体">黑体</option> </SELEct> <SELEct name="sizeSELEct" id="sizeSELEct"> <option value="24">24</option> <option value="48">48</option> <option value="96">96</option> <option value="192">192</option> </SELEct> <SELEct name="strokeStyleSELEct" id="strokeStyleSELEct"> <option value="lightred">lightred</option> <option value="lightgreen">lightgreen</option> <option value="lightblue">lightblue</option> <option value="lightgray">lightgray</option> </SELEct> <SELEct name="fillStyleSELEct" id="fillStyleSELEct"> <option value="lightred">lightred</option> <option value="lightgreen">lightgreen</option> <option value="lightblue">lightblue</option> <option value="lightgray">lightgray</option> </SELEct> </div> <canvas id="canvas" width="800" height="600"></canvas> </body> <script type="text/javascript"> /* 这是书中代码自带的一个Textcursor对象的代码 * Copyright (C) 2012 David Geary. This code is from the book * Core HTML5 Canvas,published by Prentice-Hall in 2012. * * License: * * Permission is hereby granted,free of charge,to any person * obtaining a copy of this software and associated documentation files * (the "Software"),to deal in the Software without reStriction,* including without limitation the rights to use,copy,modify,merge,* publish,diStribute,sublicense,and/or sell copies of the Software,* and to permit persons to whom the Software is furnished to do so,* subject to the following conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * The Software may not be used to create Training material of any sort,* including courses,books,instructional videos,presentations,etc. * without the express written consent of David Geary. * * THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,* EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES * OF MERCHANTABILITY,FITnesS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT * HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,* WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING * FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR * OTHER DEALINGS IN THE SOFTWARE. */ // cursor......................................................... Textcursor = function(fillStyle,width) { this.fillStyle = fillStyle || 'rgba(0,0.7)'; this.width = width || 2; this.left = 0; this.top = 0; }; Textcursor.prototype = { getHeight: function(context) { var h = context.measureText('M').width; return h + h / 6; },createPath: function(context) { context.beginPath(); context.rect(this.left,this.top,this.width,this.getHeight(context)); },draw: function(context,left,bottom) { context.save(); this.left = left; this.top = bottom - this.getHeight(context); this.createPath(context); context.fillStyle = this.fillStyle; context.fill(); context.restore(); },erase: function(context,imageData) { context.putImageData(imageData,this.left,this.getHeight(context)); } }; // Text lines..................................................... TextLine = function(x,y) { this.text = ''; this.left = x; this.bottom = y; this.caret = 0; }; TextLine.prototype = { insert: function(text) { this.text = this.text.substr(0,this.caret) + text + this.text.substr(this.caret); this.caret += text.length; },removeCharacterBeforeCaret: function() { if (this.caret === 0) return; //此处this.caret-1意思就是把最后一个字符给去掉 this.text = this.text.subString(0,this.caret - 1) + this.text.subString(this.caret); this.caret--; },getWidth: function(context) { return context.measureText(this.text).width; },getHeight: function(context) { var h = context.measureText('W').width; return h + h / 6; },draw: function(context) { context.save(); context.textAlign = 'start'; context.textBaseline = 'bottom'; context.strokeText(this.text,this.bottom); context.fillText(this.text,this.bottom); context.restore(); },0); } }; </script> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var fontSELEct = document.getElementById("fontSELEct"); var sizeSELEct = document.getElementById("sizeSELEct"); var strokeStyleSELEct = document.getElementById("strokeStyleSELEct"); var fillStyleSELEct = document.getElementById("fillStyleSELEct"); var cursor = new Textcursor(); var line; var blinkingInterval; var BLINK_TIME = 1000; var BLINK_OFF = 300; function drawBACkground() { var STEP_Y = 12,TOP_MARGIN = STEP_Y * 4,LEFT_MARGIN = 35,i = context.canvas.height; context.save(); context.strokeStyle = 'lightgray'; context.lineWidth = 0.5; while (i > TOP_MARGIN) { // Draw horizontal lines from bottom up context.beginPath(); context.moveTo(0,i); context.lineTo(context.canvas.width,i); context.stroke(); i -= STEP_Y; } // Draw vertical line context.strokeStyle = 'rgba(100,0.3)'; context.lineWidth = 1; context.beginPath(); context.moveTo(LEFT_MARGIN,0); context.lineTo(LEFT_MARGIN,context.canvas.height); context.stroke(); context.restore(); } function windowToCanvas(x,y) { var bBox = canvas.getBoundingClientRect(); return { x: x - bBox.left * (canvas.width / bBox.width),y: y - bBox.top * (canvas.height / bBox.height) }; } function saveDrawingSurface() { drawingSurfaceImageData = context.getImageData(0,canvas.width,canvas.height); } function setFont() { //易错点：px左边有一个空格键，在font中设置的时候是在字号和字体之间有一个空格键的 context.font = sizeSELEct.value + "px " + fontSELEct.value; } function blinkcursor(x,y) { clearInterval(blinkingInterval); blinkingInterval = seTinterval(function(E) { cursor.erase(context,drawingSurfaceImageData); setTimeout(function(E) { //当光标需要闪动的时候触发 //我们在输入的状态下是不会触发这个if中的内容的 //我还不懂为什么在输入的状态下不会触发if中的内容 //这个if中的条件到底是用来做什么的-->应该是判定是否要闪动的，但是为什么是这样写呢？ if (cursor.left == x && cursor.top + cursor.getHeight(context) == y) { cursor.draw(context,x,y); } },300); },1000); } function movecursor(x,y) { cursor.erase(context,drawingSurfaceImageData); saveDrawingSurface(); context.putImageData(drawingSurfaceImageData,0); cursor.draw(context,y); blinkcursor(x,y); } canvas.onmousedown = function(E) { var loc = windowToCanvas(e.clientX,e.clientY); var fontHeight = context.measureText("W").width; fontHeight += fontHeight / 6; line = new TextLine(loc.x,loc.y); movecursor(loc.x,loc.y); }; fillStyleSELEct.onchange = function(E) { //此处为什么还要对cursor的style进行设置 //因为光标也要跟着变颜色的，你选了lightblue，那么当前的光标的颜色就是lightblue cursor.fillStyle = fillStyleSELEct.value; context.fillStyle = fillStyleSELEct.value; } strokeStyleSELEct.onchange = function(E) { cursor.strokeStyleSELEct = strokeStyleSELEct.value; context.strokeStyle = strokeStyleSELEct.value; } //按下任意键触发 document.onkeydown = function(E) { //8是BACkSpace，13是Enter //这里的作用何在？~本来他也会触发默认的情况的嘛~ if (e.keyCode === 8 || e.keyCode === 13) { e.preventDefault(); } if (e.keyCode === 8) { context.save(); line.erase(context,drawingSurfaceImageData); //删去最后一个字符 line.removeCharacterBeforeCaret(); //光标移动 movecursor(line.left + line.getWidth(context),line.bottom); line.draw(context); context.restore(); } }; //按下字母数字键是触发 document.onkeypress = function(E) { var key = String.fromCharCode(e.which); //e.ctrlKey是判断Ctrl键是否被按下了 //e.MetaKay是判断Meta键是否被按下，这个键现代的键盘上已经很少了---by2015年 if (e.keyCode !== 8 && !e.ctrlKey && !e.MetaKey) { e.preventDefault(); context.save(); line.erase(context,drawingSurfaceImageData); line.insert(key); movecursor(line.left + line.getWidth(context),line.bottom); context.shadowColor = "rgba(0,0.5)"; context.shadowOffsetX = 1; context.shadowOffsetY = 1; context.shadowBlur = 2; line.draw(context); context.restore(); } }; fontSELEct.onchange = setFont; sizeSELEct.onchange = setFont; cursor.fillStyle = fillStyleSELEct.value; cursor.strokeStyle = strokeStyleSELEct.value; context.fillStyle = fillStyleSELEct.value; context.strokeStyle = strokeStyleSELEct.value; context.lineWidth = 2.0; setFont(); drawBACkground(); saveDrawingSurface(); </script> </html>
以上是大佬教程为你收集整理的《HTML5 Canvas核心技术——图形、动画与游戏开发》第三章要点汇总全部内容，希望文章能够帮你解决《HTML5 Canvas核心技术——图形、动画与游戏开发》第三章要点汇总所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。