canvas热门博客列表 - ITeye博客频道 - 第12页

博客专栏推荐

本月博客排行

年度博客排行

HTML5 中捕捉视频的小TIPS

今天发现一段不错的HTML 5小TIPS,主要是在支持HTML 5的浏览器上, 在播放视频时,可以点按钮,而把当前帧的图象CUT到一个canvas中去,下面上代码: var videoId = 'video'; var scaleFactor = 0.25; var snapshots = []; /** * Captures a image frame from the pr ...

html5 canvas

jackyrong 评论(0) 有2252人浏览 2012-02-17 13:02

Canvas做游戏实践分享(十)

6 用户交互——移动物体游戏的核心在于交互，很多时候需要用户动手来操作游戏对象，很基本的一个操作就是移动物体。接下来我们会介绍如何拖动物体，在画布上扔物体等。 6.1 选择与释放对象使用鼠标对物体的拖拽操作主要有三个步骤——鼠标进入物体范围并按下，鼠标移动及鼠标释放。这涉及到三个鼠标事件：mousedown,mousemove,mouseup。我们按 ...

canvas html5 javascript drag games

blessdyb 评论(4) 有4244人浏览 2012-02-17 07:17

Canvas做游戏实践分享(九)

反弹反弹的处理原理很简单，在运动对象碰到边界后，我们将其放置到与边缘紧貼的位置，之后将其方向反向即可（因为边界是水平或竖直的 ...

javascript canvas html5 games 速度

blessdyb 评论(0) 有1890人浏览 2012-02-16 00:38

Canvas做游戏实践分享(八)

5.边界控制与摩擦力在大多数的游戏设计中，会有环境边界控制来帮助我们保证画布中的对象在运动的过程中不会脱离画面。同时，对象的运动环境很少会是真空的情况，所以就会存在着摩擦力阻碍物体的速度变化。 5.1 环境边界控制如果我们关注的运动对象在移动的过程中消失在了视窗之外，我们有两大类的选择：一种是将对象重新移动到当前的视窗中或者不再关注此对象，另一种方式是使当前的 ...

canvas JavaScript html5 games

blessdyb 评论(0) 有1890人浏览 2012-02-14 23:57

Canvas做游戏实践分享(七)

4.2 加速度加速度是改变速度大小及方向的一个属性，在物体受力的过程中，会产生加速度来改变速度的大小及方向。加速度的处理与速度的处理非常类似。一维坐标系统下的加速度一维坐标系统下加速度的实现很简单，我们仍然使用小球系统来模拟，为小球对象添加X轴与Y轴上的加速度属性。实现起来有两步：初始化加速度值，在每一帧开始时为速度增加加速度的值。如下： ball.ax=INITIAL ...

canvas javascript html5 加速度 games

blessdyb 评论(0) 有2152人浏览 2012-02-13 23:08

Canvas做游戏实践分享(六)

4.1速度运动最基本的属性就是速度。注意这里的速度是物理中所说的速度(Velocity)，它包括大小及方向两部分组成。在动画中，如果我们已知当前一帧对象的位置以及速度，那在下一帧我们就能计算出物体所在的位置。在大多数情况下，速度的大小是按像素/帧为单位的，但实际运行中，由于浏览器的帧率不稳定性，会出现小的差别。如果应用对于统一帧率要求很严格，可以使用其它的方式来处理，之后我们会介绍这 ...

canvas html5 javascript 速度 games

blessdyb 评论(0) 有3032人浏览 2012-02-13 07:37

Canvas做游戏实践分享(五)

3.5 渐变 Canvas的渐变有两各路，线性或径向。在使用gradient时，注意使用createLinearGradient与createRadiusGradient所创建的fillStyle均只在其指定的矩形/圆环区域内生效，如果要fill的图形处于gradient对象之后，则 ...

canvas javascript html5 gradient imageData

blessdyb 评论(0) 有2382人浏览 2012-02-12 11:44

Canvas做游戏实践分享(四)

3.4 使用quadraticCurveTo绘制二次贝赛尔曲线 Canvas提供了一系列的方法来绘制曲线，比如quadraticCurveTo(通过起始两个点以及一个控制点来绘制，前两个参数为控制点横纵坐标，后两个参数为终点横纵坐标，使用的是数学上的二次贝赛尔方程)。下面我们来看一下常见的一些使用。固定控制点如下程序，我们实现了一个固定起始点，使用鼠标 ...

JavaScript canvas html5 贝赛尔曲线

blessdyb 评论(1) 有3136人浏览 2012-02-12 09:03

Canvas做游戏实践分享(三)

3. Canvas 常见用法 3.1 canvas中的色彩对于canvas中色彩的表示，主要沿用CSS的四种方式： #RRGGBB 十六进制表示法 #RGB 上述十六进制中特殊色彩的简写表达，两种表示法的对应关系为复制R，G，B位上的数值，如#0bf是#00bbff的简写表达方式 rgb(R,G,B) 函数式的表达方式，各色彩取值为0~255 rgba(R ...

canvas javascript html5 games webapp

blessdyb 评论(0) 有2272人浏览 2012-02-11 20:58

android 涂鸦

public class PaintView extends View { private Canvas mCanvas; private Path mPath; private Paint mPaint; private float mX, mY; private Bitmap imgBitmap; private ...

canvas mpath mpaint

zen.keven 评论(1) 有851人浏览 2012-02-10 16:41

Canvas做游戏实践分享(二)

2.游戏中的数学知识在游戏的开发中，数学知识特别是其中的三角函数使用特别广泛 2.1 角度在使用canvas来制作动画的过程中，我们使用到的角度都是以弧度为单位的,角度与弧度之间的换算单位如下： radians=degrees*Math.PI/180 同时，在canvas中的坐标系是以右上角为原点(0,0),向左为x轴增加方向，向下为y轴增加方向。因此，需 ...

JavaScript canvas html5 games web

blessdyb 评论(0) 有5006人浏览 2012-02-08 23:21

Canvas做游戏实践分享(一)

近期看了几本老外的书，学习了一些大神们的博客，接触了一下火的不得了的canvas做游戏，把自己的学习过程分享出来。 1.游戏的基本内容 1.1什么是� ...

javascript html5 canvas games web

blessdyb 评论(3) 有7958人浏览 2012-02-08 21:23

canvas+js写的绘图小程序

前段时间学习canvas写的一个小程序，实现了简单的绘图操作，第一次写比较具体的代码，希望大家支持，多提意见，谢谢。 1.文件介绍 Line.js 定义线的绘制方法 Circle.js 定义圆的绘制方法 Rectangle.js 定义长方形的绘制方法 drawBoard.html 主程序逻辑 2.主程序逻辑介绍 2-1. 鼠标按钮按下时，获得当前的状态，如果是线，创建 ...

canvas js 绘图

Black_Kite 评论(1) 有2882人浏览 2012-01-30 16:35

Flex 4 设置背景图片

Flex 3中Canvas是可以设置backgroundImage的，但是在Flex 4的Spark组件中则不支持backgroundImage属性的设置，怎么办呢？方法当然很多：可以考虑用s:Group去代替Canvas，两个组件可以达到类似的功能， <s:Group width="100%" height="111"> <s: ...

Canvas backgroundImage BitmapFill fillMode

baixiaozhe 评论(0) 有3294人浏览 2012-01-16 10:31

介绍在Titanium中，将WebView中通过canvas绘制的图像保存为文件的方法。用户通过canvas所绘制的图像，在很多时候需要保存为文件。如何将WebView的canvas数据传递给Titanium有2个方法。 1.在html文件中（包含canvas标签的html文件）通过JavaScript（Titanium.App.fireEvent）通信将canvas的数据作为该事件的参数传递 ...

appcelerator titanium mobile canvas

rensanning 评论(2) 有3327人浏览 2012-01-11 21:19

圣诞前赶制的小站,入门级

近期边学习sinatra, html5 canvas 边尝试写了个有关 "阿狸" 得小站. 终于在圣诞夜发布到了cloudfoundry 网址 http://alieternity.cloudfoundry.com ...快实习了. 希望找个不错得工作

html5 sinatra canvas

genius_45 评论(5) 有1429人浏览 2011-12-25 01:08

Canvas入门实例09：合成

主要合成属性有两个 context.globalAlpha = 0.5 指定在画布上绘制的内容的不透明度。这个值的范围在 0.0（完全透明）和 1.0（完全不透明）之间。默认值为 1.0 context.globalCompositeOperation = 'source-over' 绘制到画布上的颜色是如何与画布上已有的颜色组合的，默认值是 "source-over& ...

Canvas

BuN_Ny 评论(0) 有1221人浏览 2011-12-20 17:12

html5 loading 效果来了

Html5在移动设备上表现抢眼，几乎所有稍微高端一点的设备（乔帮主的iPad，iPhone和Andriod的平板手机等）的浏览器都支持Html5。而且据我个人的测试这些支持html5的设备对canvas标签的支持是相当的好。大家都知道web2.0以来大量的使用ajax，loading的小图标也有很多很多种，甚至还有专门提供loading图片的网站。所以我就想能不能让html5解决一下这个以前用 ...

JavaScript HTML5 canvas

yukaizhao 评论(0) 有1268人浏览 2011-12-20 11:38

发现一个会导致HTML5 canvas的save和restore失效的情况

今天写代码出了一点bug，结果是canvas的save和restore失效。 ctx.save(); ctx.translate(pos_.x(), pos_.y()); ctx.rotate(angle_); ctx.drawImage(image_, -width_ / 2, -height_ / 2, width_, height_) ...

save restore canvas javascript

祈祷幸福评论(1) 有1994人浏览 2011-12-17 20:53

Canvas入门实例08：三次方贝塞尔曲线

本文示例三次方贝塞尔曲线的画法。方法如下： context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 其中， cp1x 控制点1的横坐标 cp1y 控制点1的纵坐标 cp2x 控制点2的横坐标 cp2y 控制点2的纵坐标 x 终止点横坐标 y 终止点纵坐标参考上一篇二次方贝 ...