html5游戏开发马赛克对比,canvas实现图片马赛克的示例代码
1. 原生canvas实现用到的API
1) getContext(contextID) ---返回一个用于在画布上绘图的环境
Canvas.getContext('2d') // 返回一个 CanvasRenderingContext2D 对象,使用它可以绘制到 Canvas 元素中
2)drawImage
drawImage(imgObj, x, y) // 按原图大小绘制, x、y为图片在画布中的位置坐标
drawImage(imgObj, x, y, width, height) // 按指定宽高绘制
drawImage(imgObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) // 从原来图片上某一个位置开始(sourceX,sourceY),指定长宽进行剪切(sourceWidth,sourceHeight),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上
3) getImageData(x, y, width, height) ---获取矩形区域的图像信息
ctx.getImageData(0, 0, 10, 10) // 获取左上角坐标为(0, 0),宽高为区域内的图像信息
// 返回ImageData: { width: 10, height: 10, data: Uint8ClampedArray[400] }
4)beginPath() ---开始一条路径,或重置当前的路径 5)rect(x, y, width, height) ---绘制矩形
6)lineWidth ---设置或返回当前线条的宽度
7)fillStyle ---设置或返回用于填充绘画的颜色、渐变或模式
ctx.fillStyle = color|gradient|pattern
8)strokeStyle ---设置或返回用于笔触的颜色、渐变或模式
9)globalAlpha ---设置或返回绘图的当前透明值
10)fill() ---填充当前的图像(路径)。默认颜色是黑色
【注】如果路径未关闭,那么 fill() 方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。
11)stroke() ---会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
12)toDataURL(type, encoderOptions) ---导出图片,type为图片类型, encoderOptions图片质量,[0, 1]
Canvas.toDataURL("image/png", 1)
2. fabric.js
简化canvas编写的库,为canvas提供所缺少的对象模型
fabric.js能做的事
1)在canvas上创建、填充图形(包括图片、文字、规则图形和复杂路径组成图形)
2)给图形填充渐变颜色
3)组合图形(包括组合图形、图形文字、图片等)
4)设置图形动画集用户交互
5)生成JSON, SVG数据等
3.使用fabric.js实现用到的API
1)声明画布
let canvas =new fabric.Canvas('canvas') {
width: 200,
height: 200
}
插入图片
let imgInstance = new fabric.Image(imgElement,{
left: 0,
top: 0,
width: 100,
height: 100,
angle: 0
}
3)设置背景图片 setBackgroundImage
canvas.setBackgroundImage(imgInstance)
4)renderAll() 重新绘制
5)on() 用户交互
canvas.on('mouse:down', function(options) {
console.log(options.e.clientX, options.e.clientY)
})
// 监听事件
/*
mouse:down :鼠标按下时
mouse:move :鼠标移动时
mouse:up :鼠标抬起时
after:render :画布重绘后
object:selected:对象被选中
object:moving:对象移动
object:rotating:对象被旋转
object:added:对象被加入
object:removed对象被移除
*/
6)getPointer()
7)setWidth()、setHeight() 设置canvas的宽高
8)画矩形
let rect = new fabric.Rect({
left: 0,
top: 0,
width: 100,
height: 100
})
add(obj) 添加图形
canvas.add(rect)
10)remove(obj) 移除图形
11)set() 设置对象内容
12)toDataURL(obj)
4.原生canvas实现代码
- 马赛克
- 添加文字
- 裁剪
- 旋转
- 导出图片
你的浏览器太low
html5游戏开发马赛克对比,canvas实现图片马赛克的示例代码相关推荐
- html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件
这是一款基于HTML5 canvas的图片马赛克js插件.该图片马赛克插件使用简单,可调整马赛克的大小,透明度等属性,适合用于制作一些特殊的图片效果. 基于HTML5 Canvas的纯JS图片马赛克效 ...
- 【Canvas】HTML5游戏开发的基本流程+P2.js物理引擎实战开发
<HTML5游戏开发的基本流程> * 1. HTML5的简述 * 2. HTML5游戏开发所需的环境与工具 * 2.1. 开发环境 * 2.1.1. 浏览器 * 2.1.2. 开发语言 * ...
- HTML5游戏开发系列教程5(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/ 最终我决定准备下一篇游戏开发系列的文章,我们将继续使用can ...
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
开言: 以前lufy前辈写过叫"html5游戏开发-零基础开发RPG游戏"的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识. ...
- html5游戏开发--动静结合(二)-用地图块拼成大地图 初探lufylegend
一.前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟& ...
- HTML5 游戏开发快速提升
小册介绍 HTML5 是构建 Web 内容的一种语言描述方式,是最新的 HTML 标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一.HTML5 是跨平台的,被设计为在不同类型 ...
- HTML5游戏开发实战
<HTML5游戏开发实战> 基本信息 原书名:HTML5 Games Development by Example: Beginner's Guide 作者: (美)Makzan 译者: ...
- HTML5游戏开发技术基础整理
随着HTML5标准最终敲定,HTML5将有望成为游戏开发领域的的热门平台.HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是目前跨平台应用开发的最佳实施 ...
- HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!)
HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.) 著 谢光磊 译 ISBN 978-7-121-21226-0 ...
最新文章
- 用深层神经网络解释大脑的运作
- 计算机基础算法棋盘覆盖,分治算法求解棋盘覆盖问题互动教学过程.doc
- Android中解决debug.keystore到期的问题
- Faster-Rcnn的loss曲线可视化
- PC817/TLP2309/TLP291/AQY280S主要参数对比
- 我们是已经谈不起恋爱的80后
- PS使用:解决图片使用PS打开提示无法完成请求,因为找到不知名的或无效的JPEG标志符类型
- 深度学习caffe:权值初始化
- 如何解决 Word 打印时内容缺失的问题?
- pm8060raid卡命令
- python--基础知识点--继承、多态、鸭子类型
- phpcms修改了配置文件之后出现Warning: date() expects parameter 2 to be long..错误
- 第9章第18节:制作商业计划书的商业模式幻灯片 [PowerPoint精美幻灯片实战教程]
- python画立体地球_如何在Python中绘制3D地球?
- 红旗Linux的特点和应用范围,三大特性!红旗Linux Desktop 7体验
- wxPython 教程
- 瞬间把自己家里的ipad或华为平板、手机变成电脑副屏
- centos7.2 搭建BugFree
- 金融FRM和CFA哪个含金量高?
- HTML+CSS基础总结(下)
热门文章
- 百无聊赖之JavaEE从入门到放弃(五)this的本质_对象创建过程的4 步_隐式参数 static
- 微信小程序使用场景延伸:扫码登录、扫码支付
- 彻底删除鲁大师,亲测W10成功
- 520,用AI为她写首歌吧!
- Springboot+vue在线考试系统源码,前后端分离
- 笔记本触摸板失灵(失效)_开关
- 被忽视的智能电视小程序领域
- 通过浏览器直接打开android应用程序,通过浏览器直接打开Android App 应用程序
- nvm安装node “npm”不是内部命令
- 如何使用CMD命令行启动系统某项服务