html5 canvas入门
文章平均质量分 69
介绍html5 canvas基本特性,入门学习笔记
bill_man
从事手机游戏开发,喜欢钻研技术,努力成为优秀的程序员
展开
-
Html5 Canvas初探学习笔记(15) -鼠标事件
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man本篇完成这样一个例子,让主角随着鼠标移动,效果如下:update函数和上一篇一致,代码如下:然后来看init的初始化部分,和上一篇的示例一样,代码如下:然后分别定义mousedown,mousemove,原创 2012-04-10 22:38:02 · 10162 阅读 · 3 评论 -
Html5 Canvas初探学习笔记(14) -简单动画实现
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man之前都是简单的静止绘图,本篇实现一个简单的动画效果,效果如下:就是让人物向斜下方运动,代码如下:主要是由两个函数组成,首先当页面载入的时候调用init函数,首先来看init函数,init函数首先是几句初始化的内容原创 2012-04-10 22:35:25 · 6477 阅读 · 3 评论 -
Html5 Canvas初探学习笔记(13) -图片变换
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man之前的图形变换中的那些操作的状态值,在图片操作里依然有用,虽然像缩放这样的操作我们在绘制的时候就可以实现,不过这依然是一种实现的方法1.图片的平移,效果如下:代码如下:var image = new Image();原创 2012-04-05 21:54:16 · 5633 阅读 · 1 评论 -
Html5 Canvas初探学习笔记(12) -图片裁减和调整
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man上一篇讲了图片的两种操作,读入和导出,而读入图片之后的画图片我们采用的是只有三个参数的drawImage,本篇将分别介绍5个参数,和9个参数的drawImage,其实最后一个函数很像j2me里面的drawRegion。首先介绍5个参数的可以原创 2012-04-05 21:51:04 · 8255 阅读 · 0 评论 -
Html5 Canvas初探学习笔记(11) -简易图片操作
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man本篇介绍简易的图片操作,首先是简易的图片显示效果如下:就是把一张简单的jpg格式的图片显示在网页上,实现起来也非常简单,代码如下:var image = new Image();image.src = "icon.j原创 2012-04-04 17:34:09 · 5448 阅读 · 1 评论 -
Html5 Canvas初探学习笔记(10) -复杂路径
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man之前已经介绍过简单的绘制路径,本篇介绍绘制折线和贝塞尔曲线,首先介绍折线,效果如下:代码如下:context.beginPath();context.moveTo(100,50);//context.lineTo(1原创 2012-04-01 22:23:49 · 4614 阅读 · 1 评论 -
Html5 Canvas初探学习笔记(9) -渐变
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man本篇继续介绍html5的绘制效果,和之前介绍的不同,本篇介绍的渐变并不是一个状态值,他是之前介绍的fillStyle的一个值。首先来看一个例子:代码如下:var gradient = context.createLinear原创 2012-03-31 22:49:32 · 4271 阅读 · 0 评论 -
Html5 Canvas初探学习笔记(8) -阴影
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man本篇继续介绍html5的一些状态值,html5的绘制上下文提供了丰富的效果,本篇介绍阴影的效果,阴影有四个状态值控制,分别是shadowBlur,shadowOffsetX,shadowOffsetY和shadowColor。其中shado原创 2012-03-29 21:39:24 · 4764 阅读 · 2 评论 -
Html5 Canvas初探学习笔记(7) -合成
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man本篇介绍另外两个绘制的状态值,分别是全局阿尔法值和合成操作,首先来看全局阿拉法值全局阿拉法值很简单,就是我们的argb值里面的“a”值,不同的是全局阿拉法值必须在0.0(全透明)到1.0(全部透明)之间,对应之前提到的“a”值的0到25原创 2012-03-28 21:48:07 · 3753 阅读 · 0 评论 -
Html5 Canvas初探学习笔记(6) -变换
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man在html5中,可以实现多种的图形变换包括平移,缩放和旋转。可以通过两种方式,分别是矩阵法和函数法,以下分别介绍平移,缩放和旋转用这两种方法实现。1.平移: context.fillRect(50,50,50,50); cont原创 2012-03-27 22:50:10 · 3419 阅读 · 2 评论 -
Html5 Canvas初探学习笔记(5) -绘图状态
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man在之前的文章中,提到过一些绘图的状态值,比如线宽,和颜色。在Html5的Canvas中,绘图状态指的就是2d渲染上下文外观的整套属性,包括绘制轮廓颜色,填充颜色,线宽,变换矩阵,裁减区域等。我会在之后的文章中介绍更多的状态值。本篇文章就主要原创 2012-03-23 22:15:40 · 3763 阅读 · 0 评论 -
Html5 Canvas初探学习笔记(4) -清除屏幕
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man有些时候,我们需要清除部分或者全部的屏幕,类似于j2me的setcilp函数,在htmlcanvas中有两种方法可以清除屏幕,一种是clearRect和整个屏幕宽度高度技巧。不同的是clearRect可以实现部分的屏幕的清除也可以实现清除全原创 2012-03-22 22:05:37 · 16986 阅读 · 0 评论 -
Html5 Canvas初探学习笔记(3) -绘制样式和绘制文本
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man通过设置2d渲染上下文的fillStyle和strokeStyle的属性,就可以改变填充颜色或者绘制颜色。分别可以通过以下三种方式来修改颜色:Rgb式:context.fillStyle = 'rgb(255,0,0)';//设原创 2012-03-22 22:02:55 · 5038 阅读 · 0 评论 -
Html5 Canvas初探学习笔记(2) -绘制深入
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man上一篇基本的介绍了Html5 canvas的基本概念,对于大多数学习使用过j2me和android的画布进行绘图的程序员来说,理解Html5的Canvas并不是难事。本篇就继续上一篇的内容,讲解绘制直线,圆弧等方法。首先讲解绘制直线,请原创 2012-03-20 21:41:48 · 4526 阅读 · 3 评论 -
Html5 Canvas初探学习笔记(1)-画一个矩形
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_mancanvas元素是Html5相对于之前的Html的一个新增特性,本部分的博客文章就将研究这个组件的应用,尤其是在网页游戏开发上的应用。canvas组件和之前的table和div等组件类似,都是不需要任何外部插件就可以运行的。只需使用ht原创 2012-03-19 22:31:30 · 6168 阅读 · 2 评论