乐胖代购免代理版

享元模式

Math

实例化

js

canvas

原创 2023-05-11 15:15:00 52 阅读

精灵Sprite绘制器26

/*所有的绘制器都可以归纳为以下三类：【1】描边及填充绘制器：使用图形API来绘制精灵见6.02.01 【2】图像绘制器：用于绘制图像6.02.02 【3】精灵表绘制器：用于绘制精灵表中的单个精灵，把动画的所有帧放在一张图像上，此图片称为精灵表6.02.03 【4】精灵图片轮询绘制器：模拟精灵图表的一种技术 */ //下面这个持续过程需要注意 function a

API

js

canvas

原创 2023-05-11 15:13:55 108 阅读

Sprite对象25

var Sprite = function (name, painter, behaviors) { if (name !== undefined) this.name = name; if (painter !== undefined) this.painter = painter; if (behaviors !== undefined) this.behavi

数组

ci

Math

js

canvas

原创 2023-05-11 15:13:15 119 阅读

如何成为一名合格的软件架构师

一文带你揭开软件架构师职业的真相。做为一名资深软件架构师(自知水平一般，承蒙公司厚爱给予此Title)。多年来曾设计过很多应用、也招聘过很多架构师，所幸接触过形形色色的人才。长久以来一直想对自己多年的架构工作进行一次总结，清晰的描述一下软件架构师这个职位，也为有志成为架构师的同学们提供一点参考。无奈每次复盘都杂乱无章，这一拖就是两年，直到看到Yuval的书才有了点清晰的概念，也就有了这篇blog。此文中所有观点只代表本人，水平有限文笔一般，如有不妥请不吝赐教，感谢！！！

架构师

软件架构师

流程图

原创 2023-05-10 13:06:32 143 阅读

背景绘制24

/*常用的技术称为图块复制(blitting)，即从离屏缓冲区中将内容发生变化的那部分背景图像复制到屏幕上，还有其它两种方法是将所有内容擦除并重新绘制&仅重绘内容发生变化的那部分区域。一般是用clip()方法来实现的.如果背景比较简单采用将所有内容擦除再重新绘制可能性能更好【1】、用这些技术不用担心闪屏的问题，因为浏览器在实现时都采用了双缓冲技术。即把修改后的图像放在离屏文件中，

背景图

对象比较

双缓冲

js

canvas

原创 2023-05-10 10:29:50 87 阅读

简单动画-调用-帧23

/*js中的setIimeou和setInterval方法中的时间间隔并不准确，它只是规定了一个大致的时间，比如规定10m，则可能会在11秒执行。而且它是主动通知IE去改变，而最好的方式是让IE通知程序去做出改变，否则浏览器可能会在一段时间内死掉，所以W3C扩展了requestAnimationFrame()方法，它的时间更精确，而且是IE通知程序去做出改变，每种浏览器对上述方法的支持都不一样，所

ci

sed

Time

js

canvas

原创 2023-05-10 10:29:09 49 阅读

视频处理22

//.....................EXAMPLE01....................................................... <body> <video id='video' poster> <source src='Chrome_starts_fast_hammock.mp4'/>

ide

Data

2d

js

canvas

原创 2023-05-10 10:28:34 227 阅读 yyds干货盘点

放大镜21

/*工作原理如下：当拖动鼠标时，程序捕获放大镜最小外接矩形范围内的像素，然后程序将剪辑区域设置为放大镜所在范围，并将刚捕获的图像绘制到canvas自身，在绘制时调用接受9个参数的drawImage()方法来放大图像。除了绘制被放大镜放在的图像外，还会擦除用户拖动之前的那个放大镜图像，每当拖动放大镜时，程序会调用putInageData()方法把上一次移动鼠标时用getImag

sed

Math

Time

js

canvas

原创 2023-05-10 10:27:54 102 阅读

Worker工作线程20

/*当某个操作比较耗时时，可以把这些放在另一个线程中进行处理，处理时需要注意它的postMessage onmessage方法是定死的*/ var sunglassFilter = new Worker('sunglassFilter.js'); sunglassFilter.postMessage( context.getImageData(0, 0, canvas.width, canvas.

工作线程

回调函数

传递参数

js

canvs

原创 2023-05-10 10:27:05 76 阅读

图像与视频基础,离屏19

/*除了可以把图像绘制到canvas中，还可以把自身或其它canvas、视频的某一帧绘制到当前绘图环境中。 --1--有时两个canvas的相互绘制需要创建离屏canvas，离屏技术实际上是用空间换时间的一种技术创建离屏canvas元素，可以动态创建元素，也可以用网页中一个隐藏区域的元素 offscreenCanvas = document.crea

滤镜

数组

缩放

js

canvas

原创 2023-05-10 10:26:32 71 阅读

简单的文本编辑器实现18

简单的文本编辑器实现

文本编辑

sed

html

js

canvas

原创 2023-05-10 08:56:37 160 阅读

在圆弧周围绘制文本17

var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), CENTROID_RADIUS = 10, CENTROID_STROKE_STYLE = 'rgba(0, 0, 0, 0.5)', CENTROID_FILL_STYLE ='rgba(80, 1

ci

Math

2d

js

canvas

原创 2023-05-10 08:56:05 91 阅读

字体基础16

/* *****FONT PROPERTY******* */ context.textAlign; //指定文字的水平对齐：start(默认), end, left, right, center;限定文本的绘制方向的，比如start, top时，文本就从x,y向下和右书写，如果第一个字国字，那第x,y就是国字左上角 contex.textBashLine; //指定文字

ci

ide

5e

js

canvas

原创 2023-05-10 08:55:27 117 阅读

剪辑区域-橡皮擦&不断变小的动画15

剪辑区域-橡皮擦&不断变小的动画

sed

Math

2d

js

canvas

原创 2023-05-10 08:54:49 99 阅读

图像合成效果14

图像合成效果

Math

图片合成

图像合成

原创 2023-05-10 08:21:38 98 阅读 1点赞

编辑贝塞尔曲线13

编辑贝塞尔曲线

sed

Math

2d

js

canvas

原创 2023-05-10 08:20:47 95 阅读 1点赞

多边形的绘制与拖动处理12

多边形的绘制与拖动处理

sed

ide

缓存

js

canvas

原创 2023-05-10 08:20:05 163 阅读 1点赞

橡皮筋似画图11

橡皮筋似画图

sed

Math

2d

js

canvas

原创 2023-05-10 08:19:20 85 阅读 1点赞

扩展绘制-虚线10

扩展绘制-虚线10-canvas

Math

2d

方法调用

原创 2023-05-10 08:18:33 122 阅读 1点赞

填充&描边：渐变-图像-阴影9

/*颜色填充*/ context.fillStyle = 'blue'; //......................................................................... /*线性渐变，此方法接收4个参数，线段的起始点，这4个参数可以用来控制其渐变的方向，addColorStop方法指定渐变的分隔点,渐变同样适用于其它比如图形、文字等*/ g

线性渐变

回调函数

位图

js

canvas

原创 2023-05-10 08:17:47 141 阅读 1点赞

橡皮筋选取8

/* *选择过程是一个不可见的层，通过鼠标的三个事件来确定起始和结束点的坐标。当mouseup时根据坐标重绘canvas，这样就实现了放大功能，此程序只实现了放大的功能，如果稍加改变就能实现回退：通过POP堆栈来实现变小：原始与最终的鼠标位置对比，X和Y都要比较 */ var canvas = document.getElementById('canvas'),

sed

Math

html

js

canvas

原创 2023-05-09 00:39:14 67 阅读 1点赞

橡皮筋绘制7

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var cacheImage = null; var mouseStart; var drawFlag = false; canvas.onmousedown = function(event){ event.pre

sed

2d

js

canvas

原创 2023-05-09 00:37:47 69 阅读 1点赞

绘制网格6

//version 1.0-0，参数为每个格的像素大小 function drawGrid(context, color, stepx, stepy) { context.save() context.strokeStyle = color; context.lineWidth = 0.5;//这处只绘制0.5的宽像素是由canvas的特性决定的，如果这个1PX正好位于两个像素

背景色

js

canvas

html

原创 2023-05-09 00:36:51 69 阅读 1点赞 ChatGPT初体验

简单的边界碰撞检测5

var context = document.getElementById('canvas').getContext('2d'), startButton = document.getElementById('startButton'), circles = []; for (var i=0; i < 100; ++i) {//定义100个小球 circles[i]

ci

Math

碰撞检测

js

canvas

原创 2023-05-09 00:35:48 105 阅读 1点赞

canvas事件4

/*在浏览器中只有拥有焦点的控件才可以获得键盘事件，如果当前页面没有元素获得焦点，则键盘事件发生在window与document上。【1】由于canvas是一个无法获得焦点的元素，所以它的所有键盘事件全要加在window或document上。【2】但canvas可以接收鼠标事件。【3】在处理事件时注意preventDefault()方法 */ /*键盘事件：

键盘事件

鼠标事件

控件

js

canvas

原创 2023-05-09 00:34:49 116 阅读 1点赞

坐标查看器3

// 取得鼠标位置实际上是相对于window的，而canvas有自己的一套坐标系，所以需要在这里进行转换，下面的函数额外实现了当canvas与绘制大小不一致时坐标的位置缩放 function windowToCanvas(canvas, x, y) { var bbox = canvas.getBoundingClientRect(); return { x: x - bbox.lef

Math

键盘事件

缩放

js

canvas

原创 2023-05-09 00:32:40 109 阅读 1点赞

基本图形绘制API2

/*在context中存在一个堆栈，save()方法是将当前的绘图环境压入顶部。另一个方法是弹出栈顶环境的。可以多次压入，也可以嵌套使用，意味着可以保存多个绘图环境。所谓的环境其实就是context的所有属性、当前的坐标变换信息、剪辑区域等。并不包括当前的路径和位图，就是与3D绘图不同的地方*/ context.save(); context.restore(); context.clearRec

当前路径

缩放

显式

canvas

js

原创 2023-05-09 00:31:05 169 阅读 1点赞

Canvas概述01

html5图形化设计

位图

阴影效果

html

canvas

js

原创 2023-05-09 00:29:36 102 阅读 1点赞

研发效能度量实践

底层逻辑优秀的度量体系设计对目标会有很强的正向牵引作用，不恰当的度量体系往往会引发一场“腥风血雨”。目的不是为了考核，本质上是为了提高效能。时代变了，很多事物底层逻辑都变了。面对变革，最重要的并不是方法和技术的升级，而应该是思维模式的升级。我们身处数字化的变革之中，需要将工业化时代科学管理的思维彻底转为数字经济时代的全新思维。对于软件研发效能的度量，我们绝大多数时候还在用工业化时代形成的管理理念来

数据

开发者

敏捷开发

效能

原创 2023-05-06 09:16:02 318 阅读 1点赞

tob云化系统建设思路

C端可以在某个行业中通过行业标准的制定，采用同一套标准甚至同一套软件，通过行业领域能力的复用，来快速构建产业平台，并通过需求的更新与场景的优化，来不断积累行业的量变，最终形成质变。在B端也同样适用，因为技术具有通用性，因此，暨希望通过现有产品和技术进行小规模的改造，来满足 B 端（Saas 化或私有云）交付和部署。

复用

API

数据

原创 2023-05-04 02:39:27 1187 阅读 1点赞 1评论 yyds干货盘点

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

生而为人的博客

欢迎

描边与填充绘制器27

精灵Sprite绘制器26

Sprite对象25

如何成为一名合格的软件架构师

背景绘制24

简单动画-调用-帧23

视频处理22

放大镜21

Worker工作线程20

图像与视频基础,离屏19

简单的文本编辑器实现18

在圆弧周围绘制文本17

字体基础16

剪辑区域-橡皮擦&不断变小的动画15

图像合成效果14

编辑贝塞尔曲线13

多边形的绘制与拖动处理12

橡皮筋似画图11

扩展绘制-虚线10

填充&描边：渐变-图像-阴影9

橡皮筋选取8

橡皮筋绘制7

绘制网格6

简单的边界碰撞检测5

canvas事件4

坐标查看器3

基本图形绘制API2

Canvas概述01

研发效能度量实践

tob云化系统建设思路