一、变形

  1、放大和缩小

  scale(X,Y)函数。

  当使用该函数时,其起始坐标值也被放大或缩小。当X、Y为负值时,可以实现翻转。

  2、平移变换

  translate(X,Y)函数。

  表示水平方向向左移动,竖直方向向下移动。

  3、旋转变换

  rotate(角度)函数。

  旋转一定角度,是以canvas的起始坐标坐标(0,0)为中心旋转。可使用translate修改canvas的中心。

  4、setTransfrom函数实现倾斜效果

  可使用transfrom()函数代替上述三种函数的功能。

  二、图形的渲染

  1、线性渐变

  使用createLinearGradient函数和addColorStop函数可以实现线性渐变。

  createLinearGradient(x1,y1,x2,y2)

  其中四个参数分别是渐变的出发点坐标(x1,y1)与终点坐标(x2,y2)。

  addColorStop(position,color)

  其中position表示从0.0到1.0之间的数值,表示渐变中颜色地点的相对低位;color参数表示渐变的颜色。

var grd = ctx.createLinearGradient(0,0,200,0);   线性渐变
grd.addColorStop(0.2,"#00ff00");
grd.addColorStop(0.8,"#ff0000");
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,100);

  2、径向渐变

  通过createRadialGradient函数和addColorStop函数实现径向渐变功能。

  createRadialGradient(x0,y0,r0,x1,y1,r1)

  其中,参数x0,y0表示开始圆的圆心坐标,r0为开始圆的直径;x1,y1为结束圆的圆心坐标,r0为结束圆的半径。

var grd = ctx.createRadialGradient(100,100,10,100,100,50);   径向渐变
grd.addColorStop(0,"#00ff00");
grd.addColorStop(1,"#ff0000");
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,200);

  3、颜色合成

  globalCompositeOperation属性说明绘制到画布上的颜色如何与画布上的已有颜色组合起来。

ctx.fillStyle = "#00ff00";   //颜色合成
ctx.fillRect(10,10,50,50);
ctx.globalCompositeOperation = "source-over";
ctx.beginPath();
ctx.fillStyle = "#ff0000";
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();

  4、颜色反转

  指的是对图形的每个像素进行颜色取反。

  5、灰度控制

  将图片变成灰色。

  6、阴影效果

  阴影的颜色可以通过shadowColor属性来指定。并且可以通过shadowOffsetX和shadowOffsetY属性来改变。应用到阴影边缘的羽化量可以通过shadowBlur属性来设置。

    ctx.shadowColor="#ff0000";
ctx.shadowBlur=100;
ctx.shadowOffsetX=20;
ctx.shadowOffsetY=30;
var image = new Image()
image.src = "1.jpg";
image.onload = function(){
ctx.drawImage(image,0,0);
}

  下面讲述一个小案例的实现:一个画板。

  代码连接如下:http://www.oschina.net/code/snippet_2685955_55850

  当鼠标按下时调用down函数,将按下标记置为true。并且获取当前鼠标的位置。

  当鼠标移动时调用draw函数。判断当按下标记为true时,获取新的鼠标位置,并开始画图。

  当鼠标弹起时调用up函数。将按下标记置为false。

HTML5 Canvas游戏开发(二)高级功能的更多相关文章

  1. HTML5 Canvas游戏开发实战 PDF扫描版

    HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...

  2. HTML5 Canvas游戏开发(三)lufylegend开源库件(上)

    lufylegend可以解决HTML5开发游戏中会遇到的一些问题: 1.各种浏览器对于JavaScript和HTML的解析是不一致的. 2.手机浏览器和PC浏览器的区别. 3.JavaScript并非 ...

  3. HTML5 Canvas游戏开发(四)lufylegend开源库件(下)

    一.文本 LTextField对象是lufylegend库件中专门用于显示文本信息的一个对象. 1.文本属性 创建的文本框对象不会自动加入可视化对象列表中.只有手动调用addChild()方法才能使它 ...

  4. HTML5 Canvas游戏开发(一)基础知识

    一.绘制基本图形 在每次用canvas画布时,都有几步是“套路” 1.在HTML中创建Canvas画布: <canvas id="mycanvas" width=" ...

  5. HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)

    上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...

  6. HTML5物理游戏开发 - 越野山地自行车(三)粉碎自行车

    自上一章公布到如今已时隔四月,实在对不住大家.让大家久等了~话说不是我不关注我的博客,而是事情一多起来写博客的时间就少了. 待到今日有空了,回头看了看自己曾经写的文章,猛得发现已经四个月不曾写文章了. ...

  7. Html5 Egret游戏开发 成语大挑战(一)开篇

    最近接触了Egret白鹭引擎,感觉非常好用,提供了各种各样的开发工具让开发者和设计者更加便捷,并且基于typescript语言开发省去了很多学习成本,对于我们这种掉微软坑许久的童鞋来说,确实很有吸引力 ...

  8. Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架

    Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架,提供JavaScript和TypeScript双重支持,内置游戏对象的物理属性,采用Pixi.js引擎以加快Canvas和W ...

  9. 使用Selenium和openCV对HTML5 canvas游戏进行自动化功能测试(一)

    上一篇讲了HTML5 canvas游戏的基本工作原理,接下来讲如何进行自动化功能测试. Selenium是一个跨平台的跨浏览器的对网页进行自动化测试的工具.从Selenium 2.0开始Seleniu ...

随机推荐

  1. NGINX+TOMCAT实现反向代理

    环境说明 NGINX: 192.168.10.10 TOMCAT: 192.168.10.11 NGINX部分 [root@nginx ~]# wget http://nginx.org/downlo ...

  2. Tomcat设置编码问题

    为了解决编码问题,在tomcat的server.xml文件中添加了useBodyEncodingForURI="true"配置,如下 <Connector port=&quo ...

  3. 有用的Javascript,长期更新...

    1,点击目标区域以外隐藏,运用场景:点击遮罩层,弹层关闭. // 点击目标区域以外隐藏 $(document).on("click", function (event) { var ...

  4. 【CodeForces】741 D. Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths(dsu on tree)

    [题意]给定n个点的树,每条边有一个小写字母a~v,求每棵子树内的最长回文路径,回文路径定义为路径上所有字母存在一种排列为回文串.n<=5*10^5. [算法]dsu on tree [题解]这 ...

  5. laravel带条件查询手动分页

    后台php代码: //手动分页 $users = $kaoqin; //打算输出的数组,二维 $perPage = 10; if ($request->has('page')) { $curre ...

  6. HDU 2594 KMP

    题目链接 题意:给定两个字符串s1,s2,求最长的s1前缀s使得s为s2的最长后缀,输出该字符串和其长度. 题解:调换s1和s2的顺序,用KMP求解即可. #include <bits/stdc ...

  7. 【leetcode 简单】 第一百零六题 压缩字符串

    给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长度. 进阶: ...

  8. Android笔记之开机自启

    有时候需要应用具有开机自启的能力,或者更常见的场景是开机时悄悄在后台启动一个Service. 关键点: 1. Android系统在开机的时候会发送一条广播消息,只需要接收这条广播消息即可,不过需要注意 ...

  9. Linux下ssh的使用

    更多内容推荐微信公众号,欢迎关注: 摘抄自:https://www.cnblogs.com/kevingrace/p/6110842.html 对于linux运维工作者而言,使用ssh远程远程服务器是 ...

  10. 【译】第十四篇 Integration Services:项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...