![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 51
Groople
专注技术分享
展开
-
【Web前端】JavaScript、ECMAScript、ES、DOM、BOM的区别与联系
本文主要解决以下几个问题:ES6、ES5是什么意思?和JavaScript有啥关系?DOM是啥?BOM是啥?JavaScript的起源1994年,网景公司(Netscape)发布了Navigator浏览器,当时非空校验只能发给服务端校验,在那个拨号上网的年代网速是比较慢的,这就导致用户交互非常耗时,为了解决这个问题,网景公司和Sun公司合作开发了JavaScript这一脚本语言,在当时大获成功。ECMAScript的产生。原创 2023-01-04 12:06:34 · 497 阅读 · 0 评论 -
用React实现基于Canvas的图片放大镜功能
主要的技术点: 1、监听图片的鼠标移动事件获取放大显示的区域; 2、利用canvas的drawImage方法截取图片;一、效果图 二、React组件代码import React from "react";import styles from './index.less';export default class MagnifierDemo extends React.Component { canvasRef: any;...原创 2021-11-15 21:01:43 · 1682 阅读 · 0 评论 -
用React实现基于Canvas的二阶贝塞尔曲线
主要的技术点: 1、利用Canvas的rect方法绘制三个方框,并监听鼠标移动事件; 2、利用canvasContext的quadraticCurveTo方法绘制贝塞尔曲线; 3、贝塞尔曲线的原理介绍:掘金https://juejin.cn/post/6844903666361565191一、效果图:二、React组件代码(注意我用的是tsx文件,如果是jsx的话把相关的类型声明删除即可)import React from...原创 2021-10-29 20:42:25 · 637 阅读 · 0 评论 -
用React实现基于Canvas的涂鸦画板
主要的技术点: 1、利用Canvas的lineTo方法和stroke方式绘制连续填充的线; 2、利用canvasContext的strokeStyle更改画笔颜色; 3、利用canvasContext的lineWidth更改画笔宽度;一、支持的功能: 1、调整画笔的颜色; 2、调整画笔的宽度;二、核心代码(注意我用的是tsx的文件格式,如果用jsx请移除数据类型声明即可)import React from...原创 2021-10-28 20:26:39 · 2142 阅读 · 1 评论