html格子像素画,canvas像素画板的实现代码
最近项目上要实现一个类似像素风格的画板,可以像素小格子可以擦除,框选变色,可以擦出各种图形,这样一个小项目看似简单,包含的东西还真不少。
绘制像素格子
我们先定义像素格子类
Pixel = function (option) {
this.x = option.x;
this.y = option.y;
this.shape = option.shape;
this.size = option.size || 8;
}
x和y表示中心点坐标,一开始我是这么做的,先定义路径
createPath: function (ctx) {
if (this.shape === 'circle') {
this.createCircle(ctx);
} else if (this.shape === 'rect') {
this.createRect(ctx);
} else {
this.createCircle(ctx);
}
},
createCircle: function (ctx) {
var radius = this.size / 2;
ctx.arc(this.x,this.y,radius,0,Math.PI*2);
},
createRect: function (ctx) {
var points = this.getPoints();
points.forEach(function (point, i) {
ctx[i == 0 ? 'moveTo' : 'lineTo'](point.x, point.y);
})
ctx.lineTo(points[0].x, points[0].y);
},
像素网格支持圆形和矩形,路径定义好后,然后进行绘制
draw: function (ctx) {
ctx.save();
ctx.lineWidth=this.lineWidth;
ctx.strokeStyle=this.strokeStyle;
ctx.fillStyle=this.fillStyle;
ctx.beginPath();
this.createPath(ctx);
ctx.stroke();
if(this.isFill){ctx.fill();}
ctx.restore();
}
然后通过循环批量创建像素网格:
for (var i = stepX + .5; i < canvas.width; i+=stepX) {
for (var j = stepY + .5; j < canvas.height; j+=stepY) {
var pixel = new Pixel({
x: i,
y: j,
shape: 'circle'
})
box.push(pixel);
pixel.draw(ctx);
}
}
这样做看似完美,然而有一个巨大毙命,每画一个像素都回绘制到上下文中,每一次都在改变canvas的状态,这样做会导致渲染性能太差,因为像素点很多,如果画布比较大,性能很是令人堪忧,并且画板上面还有一些操作,如此频繁改变canvas的状态是不合适的。
因此,正确的做法是:我们应该定义好所有的路径,最好在一次性的批量绘制到canvas中;
//定义像素的位置
for (var i = stepX + .5; i < canvas.width; i+=stepX) {
for (var j = stepY + .5; j < canvas.height; j+=stepY) {
var pixel = new Pixel({
x: i,
y: j,
shape: 'circle'
})
box.push(pixel);
}
}
//批量绘制
console.time('time');
ctx.beginPath();
for (var c = 0; c < box.length; c++) {
var circle = box[c];
ctx.moveTo(circle.x + 3, circle.y);
circle.createPath(ctx);
}
ctx.closePath();
ctx.stroke();
console.timeEnd('time');
可以看到这个渲染效率很快,尽可能少的改变canvas的状态,因为每改变一次上下文的状态,canvas都会重新绘制,这种状态是全局的状态。
像素网格交互
项目的需求是,在画布上鼠标按下移动,可以擦除像素点,这里面包含两个知识点,一个是如何获取鼠标移动路径上的像素网格,二是性能问题,因为我们这个需求的要求是绘制八万个点,不说别的,光是循环都得几十上百毫秒,何况还要绘制渲染。我们先来看第一个问题:
获取鼠标移动路径下的网格
看到这个问题,我们很容易想到,写个函数,通过鼠标的位置获取下所在的位置包含那个网格,然后每次移动都重新更新位置计算,这样看是可以完成需求,但是如果鼠标移动过快,是无法做到,每个点的位置都可以计算到的,效果会不连贯。我们换种思路,鼠标经过的路径,我们可以很明确的知道起始和终点,我们把整个绘制路径想象成一段段的线段,那么问题就变成,线段与原相交的一个算法了,线段就是画笔的粗细,线段经过的路径就是鼠标运动的路径,与之相交的圆就是需要变化样式的网格。转换成代码就是如下:
function sqr(x) { return x * x }
function dist2(p1, p2) { return sqr(p1.x - p2.x) + sqr(p1.y - p2.y) }
function distToSegmentSquared(p, v, w) {
var l2 = dist2(v, w);
if (l2 == 0) return dist2(p, v);
var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
if (t < 0) return dist2(p, v);
if (t > 1) return dist2(p, w);
return dist2(p, {
x: v.x + t * (w.x - v.x),
y: v.y + t * (w.y - v.y)
});
}
/**
* @description 计算线段与圆是否相交
* @param {x: num, y: num} p 圆心点
* @param {x: num, y: num} v 线段起始点
* @param {x: num, y: num} w 线段终点
*/
function distToSegment(p, v, w) {
var offset = pathHeight;
var minX = Math.min(v.x, w.x) - offset;
var maxX = Math.max(v.x, w.x) + offset;
var minY = Math.min(v.y, w.y) - offset;
var maxY = Math.max(v.y, w.y) + offset;
if ((p.x < minX || p.x > maxX) && (p.y < minY || p.y > maxY)) {
return Number.MAX_VALUE;
}
return Math.sqrt(distToSegmentSquared(p, v, w));
}
具体逻辑就不详述,各位看官可以自行看代码。然后通过获取到的相交网格的,然后删除box里面的数据,重新render一遍,就可以看到效果了。
同样的道理,我们可以做成染色效果,那么我们就可能实现一个canvas像素画板的小demo了。不过做成染色效果就必须使用第一种绘制方法了,每个像素必须是一个对象,因为每个对象的状态是独立的,不过这个不用担心性能,像素点不多,基本不会有卡顿感。实现效果大体如下:
最近又有点懒,先这样了,后面有时间添加一个上传图片,图片像素画的功能和导出功能。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html格子像素画,canvas像素画板的实现代码相关推荐
- 非常经典的像素画系列教程
编者:我们这里说的"像素画"并不是和矢量图对应的点阵式图像,像素画也属于点阵式图像,但它是一种图标风格的图像,更强调清晰的轮廓.明快的色彩,几乎不用混叠方法来绘制光滑的线条,所以常 ...
- Sketch:无损放大像素画
像素画,像素风格的图像,分辨率很小,放大后会有很重的模糊感.由于画风特殊,调整缩放参数就能实现无损放大效果. 缩放对比 显然,右侧的缩放效果就是我们想要的,在PS的处理方法是: 1.打开图片后,执行& ...
- 游戏像素画风格研究:变迁与发展
游戏像素画风格研究(上) 1.概述 1.1 思考和实践的关系 本篇针对像素画风格进行个人的一些反思和探讨,试图能够将像素风格这个概念用通俗的语言阐释的更加清晰一些.那么在我们开始之前,我觉得概述最重要 ...
- 游戏用像素画教程知识总结
前言 制作独立游戏美术部分是必不可少的,对于没有美术基础的我理所当然的选择了像素画作为学习目标.下面记录了学习像素画过程中总结的知识点.绘画软件使用的是Aseprite,可以在steam上购买,也可以 ...
- canvas像素画板
最近项目上要实现一个类似像素风格的画板,可以像素小格子可以擦除,框选变色,可以擦出各种图形,这样一个小项目看似简单,包含的东西还真不少. 绘制像素格子 我们先定义像素格子类 Pixel = funct ...
- html格子像素画,有趣的CSS像素
如今很多艺术被超清,高像素图片掩盖了光芒,像素艺术就是其中之一.我在逛CodePen的时候被一些像素作品惊呆了,它们又一次告诉了我像素艺术多么的了不起. 很酷不是吗?像素图案是在高清和高分辨率的图片或 ...
- html格子像素画,HTML_纯手工打造CSS像素画,在cssplay网站看到有一组CSS像素 - phpStudy...
纯手工打造CSS像素画 在cssplay网站看到有一组CSS像素画,于是也想摩仿一下,于是在网络上找到一组头像图标,看其结构比较简单,就拿它开刀吧!先看看预览图 图一 基本原理: 没有什么技术含量,主 ...
- matlab如何绘制像素格子的图_【像素画教程】超详细建筑像素场景图的绘制
这里我们以一幅傍晚的南京大牌档场景图作为例子,使用的软件是Aseprite. 一.搜集素材 1.建筑主体 过年了,画一个有年味儿的南京特色风景线南京大牌档.网上搜图+全景地图截图 2.背景 黄昏天空 ...
- JS_小工具_自己写了一个画像素画的小工具
自己抽空做了一个画像素画的小工具,界面比较简单,但也可以画着玩.呵呵. 有意思的地方在于可以把画的内容保存为一个数组,可以很方便地还原成图案... 主要的JS代码: //画板表格 var iconTa ...
最新文章
- python matplotlib散点图-Matplotlib scatter绘制散点图的方法实现
- 一个关于Oracle更新语句引发的时间字段类型的问题
- 通过Python实现马尔科夫链蒙特卡罗方法的入门级应用
- Spring Boot 多数据源(读写分离)入门
- Invalid character found in the request target. The valid characters are defi
- MongoDB(4)--MongoDB服务的启动
- sql计数_SQL计数区分功能概述
- 每天吃多少才不会胖?食物和卡路里对照表
- python登录判断用户名和密码_第一个python程序-判断登陆用户名和密码是否正确...
- 与计算机博弈相关的学术论文,爱恩斯坦棋计算机博弈系统的研究与实现计算机应用技术专业论文.docx...
- 计算机与经济学之关联刍议,西方五大经济学期刊发展趋势刍议
- 电影天堂爬去示例基础2
- flyway的快速入门教程
- 中国移动短信网关错误代码汇总(完整版)
- 计算机网络实验:802.3协议分析和以太网
- 【蓝桥单片机】51单片机(stc15f)的两个寄存器TCON和TMOD
- Lenovo(IBM) 使用BoMC工具制作微码升级U盘刷新System x系列
- python基于web的安装程序_python web.py安装使用
- 微信PC版重大更新!电脑上也能玩小游戏了
- 文字转成语音并播放出来
热门文章
- python--定义新矩阵、矩阵赋值、改变类型
- Libra是一个纸老虎吗?Libra技术专业解析 | 技术帖
- Lessonnbsp;13nbsp;Anbsp;newnbsp;dressnbsp;一件新连衣…
- 我本人一直以来犯的错误,在看了《Think In Java》后才抓了出来
- 疯狂英语脱口而出900句
- 【兴趣书签】SOHO生活——理想的生活方式
- 完美解决Chrome浏览器中图片出现彩色马赛克的问题
- 四川专科计算机学院多少分录取分数线,四川多少分能上大专,四川大专院校最低分数线...
- gurobi mac 安装
- selenium之css元素定位方法