在动画中经常要处理边界问题，比如一个物体运动到了边界，要怎么处理才合适呢？通常有几种以下几种方式： 让物体消失/*> 16 & 0xff,g = color >> 8 & 0xff,b = color >> 0xff,a = (alpha 1) ? 1 : alpha);if(a === 1) {return ‘rgb(‘+r+‘,‘+g+‘,‘+b+‘)‘;} else {return ‘rgba(‘+r+‘,‘+g+‘,‘+b+‘,‘+a+‘)‘;} };window.utils.parseColor = function (color, toNumber) {if (toNumber === true) {if (typeof color ...
canvas标签是一个矩形区域，它包含两个属性，width和height，默认为300px和150px.常用形式如下：<canvas id="mycanvas" width="400" height="200" style="border:1px solid #color;"> ...提示信息 </canvas>也可写成形式如：<canvas id="canvas" width="400" height="300" style="border:1px solid red"/>可是我在运行时发现第二个写法会导致<canvas>之后的元素无法在浏览器中显示出来.在body中将canvas放好后，就可以使用JavaScr...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <canvas width="1000" height="600"></canvas> <script> (function (w) {w[‘raf‘] = w[‘requestAnimationFrame‘] || w[‘webkit‘+r] || w[‘moz‘+r] || w[‘ms‘+r] || w[‘o‘+r] || function(c){ w.setTimeout(c, 1000 / 60); };function Fx (size,color,cxt){this.size = size;this.color = color;this.cxt = cxt;this.angle = 0;this.speed ...
1.HTML 1<!DOCTYPE html> 2<html> 3 4<head> 5<title>JavaScript-canvas时钟</title> 6<meta charset=‘utf-8‘ /> 7<link rel="stylesheet" type="text/css" href="clock.css"> 8<script type="text/javascript" src=‘clock.js‘></script> 9</head>1011<body>12<canvas id="canvas" widht="300" height="300" style="background-color:black">clock</canvas>13</body>1415</html>2.js代码 1function addLoadEvent(func) {2var ...
知识点：lineCap=type 共有三个值 1、butt：线段末端以方形结束 2、round：线段末端以圆形结束 3、square:线段末端以方形结束，但是增加一个宽度和线段相同，高度是线段厚度一半的矩形区域 具体demo<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> canvas{ border:1px solid red; } </style> </head> <body> <canvas id="radians" width="300" height="500"></c...
一、元素的一些特点：<canvas>（画布）：只有width、height两个属性，默认 width为300、height为150，单位都是px，可通过css设置，但是如宽高属性和初始比例不一致，画的图像会出现扭曲，所以尽量不要用css设置宽高属性。此外，该元素是成对的<canvas>如果你的浏览器不支持该元素，那么就会显示这里的内容</canvas>。可通过以下代码检测支持性：var canvas = document.getElementById(‘mycanvas‘);if (canvas.getContext){var ct...
之前已经介绍过简单的绘制路径，本篇介绍绘制折线和贝塞尔曲线，首先介绍折线，效果如下：代码如下：context.beginPath(); context.moveTo(100,50); //context.lineTo(100,50); context.lineTo(150,150); context.lineTo(50,150); //context.closePath(); context.stroke();之前介绍过moveTo后接起点的横纵坐标，我试了一下，第一个是lineTo也可以，后面的lineTo就是从这个点到下一个点画一条直线，然后再以这个点为起点，在调line...
本篇介绍简易的图片操作，首先是简易的图片显示效果如下：就是把一张简单的jpg格式的图片显示在网页上，实现起来也非常简单，代码如下：var image = new Image(); image.src = "icon.jpg"; image.onload = function(){context.drawImage(image,50,50); }首先创建一个Image对象，然后把image对象的src属性设置为图片的相对路径，最后，重写onload方法，就是一旦图片加载完成则显示出来。下面介绍将我们所绘制的图形导出成图片，效果...
上一篇讲了图片的两种操作，读入和导出，而读入图片之后的画图片我们采用的是只有三个参数的drawImage，本篇将分别介绍5个参数，和9个参数的drawImage，其实最后一个函数很像j2me里面的drawRegion。首先介绍5个参数的可以调整图片大小的drawImage函数。首先来看如下效果：代码如下：var image = new Image(); image.src = "grossini.png"; image.onload = function(){ context.drawImage(image,50,50); context.drawImage(image,10...
小满（bill man）个人原创，欢迎转载，转载请注明地址，小满（bill man）的专栏地址http://www.gxlcms.com/之前的图形变换中的那些操作的状态值，在图片操作里依然有用，虽然像缩放这样的操作我们在绘制的时候就可以实现，不过这依然是一种实现的方法1.图片的平移，效果如下：代码如下：var image = new Image(); image.src = "grossini.png"; image.onload = function(){context.drawImage(image,50,50);context.translate(100,10...
之前都是简单的静止绘图，本篇实现一个简单的动画效果，效果如下：就是让人物向斜下方运动，代码如下：主要是由两个函数组成，首先当页面载入的时候调用init函数，首先来看init函数，init函数首先是几句初始化的内容，获得上下文等等，然后是生成图片对象，生成图片对象主要是如下几句：this.image = new Image(); this.image.src = "grossini.png"; this.image.onload = function(){setTimeout(update,33); }这个在之前提到过，主...
本篇完成这样一个例子，让主角随着鼠标移动，效果如下：update函数和上一篇一致，代码如下：然后来看init的初始化部分，和上一篇的示例一样，代码如下：然后分别定义mousedown，mousemove，mouseup，分别对应鼠标按下，移动和抬起。代码分别如下：首先用如下代码获得坐标，如下代码使用于各种浏览器：var mx,my; if(ev.layerX || ev.layerX==0){ mx = ev.layerX; my = ev.layerY; }else if(ev.offsetX || ev.offsetX==0){ mx = ev....
有些时候，我们需要清除部分或者全部的屏幕，类似于j2me的setcilp函数，在htmlcanvas中有两种方法可以清除屏幕，一种是clearRect和整个屏幕宽度高度技巧。不同的是clearRect可以实现部分的屏幕的清除也可以实现清除全屏的方法，而重设屏幕宽高只能清除部分的屏幕。如下代码就把整个圆清除了四分之一的圆：首先画一个整个的圆，然后清除一个正方形。效果如下：如果使用如下语句，就会清除屏幕：context.clearRect(0,0,canvas.width,...
在之前的文章中，提到过一些绘图的状态值，比如线宽，和颜色。在Html5的Canvas中，绘图状态指的就是2d渲染上下文外观的整套属性，包括绘制轮廓颜色，填充颜色，线宽，变换矩阵，裁减区域等。我会在之后的文章中介绍更多的状态值。本篇文章就主要讲解保存状态和恢复状态的例子，讲解这个栈的结构。首先来看下面这个例子： 就是简单的实例一下绘制状态的存取过程，代码如下：...
canvas元素是Html5相对于之前的Html的一个新增特性，本部分的博客文章就将研究这个组件的应用，尤其是在网页游戏开发上的应用。canvas组件和之前的table和p等组件类似，都是不需要任何外部插件就可以运行的。只需使用html并且使用2D渲染上下文API（2Drender context API）类似于我们j2me开发中的Grapics和android中的canvas画笔，只要得到这个上下文就可以调用它自带的方法来绘制。我们可以通过如下的方法定义一个canvas：<canvas ...