摘要：
阅读全文
摘要：
基本类型：基本类型在内存中占据固定大小的空间，因此保存在栈内存，即这种值完全保存在内存中的一个位置。引用类型：保存在堆内存中的对象，意思是变量中保存的实际上只是一个指针，这个指针指向内存中的另一个位置。如果赋给变量的是一个引用类型的值，则必须在堆内存中为这个值分配空间。由于这种值的大小不固定，因此不能把它们保存到栈内存中。但内存地址的大小是固定的，因此可以将内存地址保存在栈内存中。ECMAScript中所有函数的参数都是按值传递的。可以把ECMAScript函数的参数想象成局部变量。检测类型：基本数据类型使用typeof引用类型使用instance of没有块级作用域在使用for语句时候尤其要 阅读全文
摘要：
继续看Canvas中的文本属性Text Align：当textAlign属性设置为left或start，并文档是从左到右对齐的时候，文本会居左对齐，或文档方向是从右向左，属性设置为end。当textalign属性设置为right或end，并文档方向为从左向右时，文本居右对齐，或文档方向为从右向左的时候属性设置为start，它也会居右对齐。如果没有设置属性，默认为start。它的值有start,end,left,center, right。简单的看一下例子<!DOCTYPE html><html> <body> <canvas id="myCa 阅读全文
摘要：
在Canvas中定义文本的最简单方法是使用CSS的font-style, font-weight,, font-size, font-face的标准值来设置context.font。例如context.font = "50px serif";context.fillStyle = "$FF0000";context.fillText = ("Hello World", 100, 80);HTML表单和Canvas进行通信<form> <!-- placeholder是html5的新属性，可能有些浏览器不支持 --&g 阅读全文
摘要：
首先我们认识一下主要的获取颜色方式context.fillStyle = 'red';context.fillStyle = "#ff0000";context.fillStyle = "rgb(r,g,b)";context.fillStyle = "rgba(r, g, b, a);其中使用rgb(r,g,b)方法和rgba(r,g,b,a)方法的时候，必须使用引号括起来。使用梯度来填充模型线性梯度变化：主要有水平方向，垂直方向和对角线方向。这三个原理都一样，只要了解其中的一个剩下的俩，相应的做出变化就能形成。因代码比较简单 阅读全文
摘要：
昨天因小区停电，没有更新，很抱歉。今天先讲一下Canas当中的简单变化。主要有旋转，移动，缩放等变化。旋转变化 想要实现旋转变化，我们要遵循以下的步骤我们画图之前都要使用context.setTransform(1, 0, 0, 1, 0, 0);在这里可以先理解成初始化矩阵。（具体的内容请自己学习，因笔者能力有限对矩阵方面不是很了解，但如果想做图形处理矩阵运算是必须要懂得）画图之前进行旋转操作，相应的函数为var angleInRadians = degree * Math.PI/180; degree为旋转度数，angleInRadians为弧度context.rotate(angl... 阅读全文
摘要：
混合使用save()和restore()方法，我们可以限定画画区域。首先我们可以使用rect()方法包围一个我们希望画画的区域，然后使用clip()方法把该区域裁剪下来。这样以后我们不管在context中做了什么操作，只有限定的部分显示出来。也就是说clip()的作用是限定要显示的区域。当我们不希望继续限定区域了，可以使用restore()方法跳出来，继续操作原来的context。function drawScreen() { var x = canvas.width / 2; var y = canvas.height / 2; var radi... 阅读全文
摘要：
今天讲的例子比较多，可能篇幅长一些。从实用性看，前三个例子需要完全理解。后面的可以有兴趣再回头看，因为圆弧和曲线平时的设计当中不经常用到。闲话少说，先来第一个例子：最基本的矩形案例中涉及的函数 fillRect(x, y, width, height)：在(x, y)点上以width和height的长高来画全填充矩形。 strokeRect(x, y, width, height)：在(x, y)点上以width和height的长高来给矩形描边（只有边框，里面为空）。 clearRectt(x, y, width, height)：在(x, y)点上以width和height... 阅读全文
摘要：
我们在第一篇里介绍了Hello World的显示及图片的显示，这一篇我们将使用Canvas来做更加复杂的案例--猜字游戏。先上效果图以及源代码HTML代码<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="chp1_guess_the_letter.js"></script> <script 阅读全文
摘要：
在这个章节我们将在Html中使用Canvas标签，再使用Javascript操纵它，达到显示《Hello World》及图片的目的。开始之前我们需要了解2个对象的概念：window和document。window对象：window对象在DOM最顶层。我们应该检测这个对象以确保所有的资源和代码在我们开始编写Canvas应用之前已经载入完成。document对象：该对象包含页面上所有的HTML标签。我们需要查看该对象，以寻找<canvas>标签并且使用JavaScript来操纵他。HTML代码为：<!doctype html><html lang="en&q 阅读全文