生而为人我很遗憾的博客_前端(3)

简单的文本编辑器实现18

简单的文本编辑器实现

文本编辑

sed

html

js

canvas

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

在圆弧周围绘制文本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 99 阅读

字体基础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 124 阅读

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

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

sed

Math

2d

js

canvas

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

图像合成效果14

图像合成效果

Math

图片合成

图像合成

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

编辑贝塞尔曲线13

编辑贝塞尔曲线

sed

Math

2d

js

canvas

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

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

多边形的绘制与拖动处理

sed

ide

缓存

js

canvas

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

橡皮筋似画图11

橡皮筋似画图

sed

Math

2d

js

canvas

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

扩展绘制-虚线10

扩展绘制-虚线10-canvas

Math

2d

方法调用

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

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

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

线性渐变

回调函数

位图

js

canvas

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

橡皮筋选取8

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

sed

Math

html

js

canvas

原创 2023-05-09 00:39:14 98 阅读 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 98 阅读 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 95 阅读 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 111 阅读 1点赞

canvas事件4

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

键盘事件

鼠标事件

控件

js

canvas

原创 2023-05-09 00:34:49 122 阅读 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 215 阅读 1点赞

基本图形绘制API2

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

当前路径

缩放

显式

canvas

js

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

Canvas概述01

html5图形化设计

位图

阴影效果

html

canvas

js

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

React专题(1)-环境配置

此节把开发react需要的所有可能的环境都先描述一下，以方便后面的开发。在react开发中主要依赖的是node，主要需要配置以下内容：nvm：需要单独安装，主要是对项目使用的node.js解释器进行管理，类比java相当于JDK版本管理器npm：随着 Node.js 一同安装的包管理器（主要用来管理包），类比java相当于mavennode.js：NodeJS 项目开发需要使用的解释器，类比jav

json

node.js

字段

react

原创推荐 2022-10-14 13:15:08 551 阅读 1点赞

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

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

51CTO博客

生而为人的博客

简单的文本编辑器实现18

在圆弧周围绘制文本17

字体基础16

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

图像合成效果14

编辑贝塞尔曲线13

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

橡皮筋似画图11

扩展绘制-虚线10

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

橡皮筋选取8

橡皮筋绘制7

绘制网格6

简单的边界碰撞检测5

canvas事件4

坐标查看器3

基本图形绘制API2

Canvas概述01

React专题(1)-环境配置

欢迎