用c语言编写图片马赛克代码代码,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
用c语言编写图片马赛克代码代码,canvas实现图片马赛克的示例代码相关推荐
- php代码画表情包,canvas绘制表情包的示例代码
本文介绍了canvas绘制表情包的示例代码,分享给大家,具体如下: 绘制卡通笑脸 var canvas = document.getElementById('canvas'); var context ...
- html5网站粒子时钟,Html5 canvas实现粒子时钟的示例代码
这篇文章主要介绍了Html5 canvas实现粒子时钟的示例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实 ...
- html5游戏开发马赛克对比,HTML5 canvas如何实现马赛克的淡入淡出效果(代码)
在显示马赛克图像时,淡入动画是逐渐从很模糊到很清晰马赛克的过程,淡出动画的处理是从图像变得清晰后又慢慢变得模糊的过程,下面我们就来看看具体的内容. 我们先来看看马赛克图像的淡入效果 代码如下 var ...
- html5 strongeaseinout,HTML5新特性 之canvas标签(Day1-4)(示例代码)
canvas 1.什么是canvas? 1.1 是HTML5提供的一种新标签 1.2 canvas是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素 1.3 canvas 拥 ...
- 在哪里能收到python实例代码-python实现网站微信登录的示例代码
最近微信登录开放公测,为了方便微信用户使用,我们的产品也决定加上微信登录功能,然后就有了这篇笔记. 根据需求选择相应的登录方式 python实现网站微信登录的示例代码 微信现在提供两种登录接入方式 移 ...
- 猴子偷桃php代码,C++实现猴子吃桃的示例代码
题目详情 有一天,某只猴子摘了一些桃子,当时吃了一半,又不过瘾,于是就多吃了一个.以后每天如此,到第n天想吃时,发现就只剩下一个桃子.输入n,表示到第n天剩下1个桃子,请计算第一天猴子摘的桃子数.程序 ...
- android 3d魔方 代码,css实现3d立体魔方的示例代码
今天来做一个简单的3d魔方 先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了 一.我们先准备好们的html代码 3d立体魔方 好了我们html代码就准备完成了,首先我们要有一个3d的思维,在 ...
- html绘制圆形和弧形的代码,html5 canvas用来绘制弧形的代码实现
这篇文章给大家分享的内容是关于html5 canvas用来绘制弧形的代码实现,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助. 1.绘制弧形context.arc( centerx, ...
- python人机猜拳游戏代码_python 实现人和电脑猜拳的示例代码
完成人机猜拳互动游戏的开发,用户通过控制台输入实现出拳,电脑通过程序中的随机数实现出拳,每一局结束后都要输出结果.当用户输入n时停止游戏,并输出总结果. import random all = ['石 ...
- 人机猜拳代码python_python 实现人和电脑猜拳的示例代码
完成人机猜拳互动游戏的开发,用户通过控制台输入实现出拳,电脑通过程序中的随机数实现出拳,每一局结束后都要输出结果.当用户输入n时停止游戏,并输出总结果. import random all = ['石 ...
最新文章
- android 中改变按钮按下时的颜色
- Ubuntu Server16.04 中文安装报错无法安装busybox-initramf
- hdu 2006 求奇数的乘积(c语言)
- app手机端连接tomcat电脑端服务器
- 前端学习(3175):react-hello-react之解决跨域问题
- leetcode197. 上升的温度(SQL)
- Java里氏转换_详解Java设计模式编程中的里氏替换原则
- Linux C语言实现清除文件中的内容
- 万亿级大数据监控平台建设实践
- Causal Representation Learning for Out-of-Distribution Recommendation
- python中复数的实部和虚部都是浮点数_Python基础:数值(布尔型、整型、长整型、浮点型、复数)...
- 美团-外卖骑手背后的AI技术
- 【iOS】苹果登录Sign in with Apple
- 2.1 被隐藏了的过程
- 群晖NAS搭建web服务器并公网可访问 1-4
- 远程公司电脑 教你快捷远程公司电脑 公司电脑如何被远程
- 说一下zoom:1的原理,万一被问到呢?
- IMP-00017 Oracle数据库imp命令导入时1659错误处理
- Spring RestTemplate为何必须搭配MultiValueMap?
- 音频信号 过零率 matlab,MATLAB计算信号短时平均过零率
热门文章
- 微型计算机原理课后习题解答,微机原理 课后题 标准答案
- 计算机组成原理实用教程课后答案,王万生《计算机组成原理实用教程》课后习题答案...
- 比尔盖茨:世界上只有一个人比我富有
- Java项目:养老院管理系统(java+Spring Boot + SpringMVC + MyBatis+HTML+CSS+JavaScrip+ Layui+maven+mysql)
- 机器学习之掌纹识别(掌纹分类)
- 香魂一缕随风散,愁绪三更入梦遥
- MYSQL 客户端与服务器关系
- APP分发渠道:国内Android市场分析
- C语言是应用最为广泛的一种高级程序设计语言
- 数据结构之完全二叉树