一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

Vue中的scoped及穿透方法

外层 >>> 第三方组件 {
样式
}

龙生   03 Dec 2022
View Details

vue安装scss

npm i sass-loader@7.3.1 -D
npm i node-sass@4.14.1 -D

龙生   03 Dec 2022
View Details

less、scss/sass的区别

sass/scss或是less,都可以看作为一种基于css之上的高级语言,其目的是使得css开发更灵活和更强大,sass的功能比less强大,基本可以说是一种真正的编程语言了,less则相对清晰明了,易于上手,对编译环境要求比较宽松,在实际开发中更倾向于选择less。但如果认真深入scss之后还是建议切换到scss,因为更加强大,更好用。

龙生   03 Dec 2022
View Details

HTML canvas strokeStyle 属性

 Canvas 对象 实例 绘制一个矩形。请用红色的笔触颜色:

尝试一下 » 浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 strokeStyle 属性。 注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。 定义和用法 strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。 默认值: #000000 JavaScript 语法: context.strokeStyle=color|gradient|pattern; 属性值 值 描述 color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。 gradient 用于填充绘图的渐变对象(线性 或 放射性)。 pattern 用于创建 pattern 笔触的 pattern 对象。   更多实例 实例 绘制一个矩形。使用渐变笔触:

  尝试一下 »   实例 用一个渐变笔触来写文本 "Big smile!":

尝试一下 »    Canvas 对象   from:https://www.runoob.com/jsref/prop-canvas-strokestyle.html

龙生   03 Dec 2022
View Details

HTML canvas lineWidth 属性

 Canvas 对象 实例 用宽度为 10 像素的线条来绘制矩形:

尝试一下 » 浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineWidth 属性。 注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。 定义和用法 lineWidth 属性设置或返回当前线条的宽度,以像素计。 默认值: 1 JavaScript 语法: context.lineWidth=number; 属性值 值 描述 number 当前线条的宽度,以像素计。    Canvas 对象   from:https://www.runoob.com/jsref/prop-canvas-linewidth.html

龙生   03 Dec 2022
View Details

学习 HTML5 Canvas 这一篇文章就够了

一、canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。 ​ 它最初由苹果内部使用自己MacOS X WebKit推出,供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来,有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox),Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。 ​ Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域,类似于其他通用的二维API,通过一套完整的绘图函数来动态生成图形。 ​ Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。 二、Canvas基本使用 2.1 <canvas>元素

  ​ <canvas>看起来和<img>标签一样,只是 <canvas> 只有两个可选的属性 width、heigth 属性,而没有 src、alt 属性。 ​ 如果不给<canvas>设置widht、height属性时,则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高,但是如宽高属性和初始比例不一致,他会出现扭曲。所以,建议永远不要使用css属性来设置<canvas>的宽高。 ###替换内容 ​ 由于某些较老的浏览器(尤其是IE9之前的IE浏览器)或者浏览器不支持HTML元素<canvas>,在这些浏览器上你应该总是能展示替代内容。 ​ 支持<canvas>的浏览器会只渲染<canvas>标签,而忽略其中的替代内容。不支持 <canvas> 的浏览器则 会直接渲染替代内容。 用文本替换:

  用 <img> 替换:

  结束标签</canvas>不可省 与 <img>元素不同,<canvas>元素需要结束标签(</canvas>)。如果结束标签不存在,则文档的其余部分会被认为是替代内容,将不会显示出来。 2.2 渲染上下文(Thre Rending Context) ​ <canvas>会创建一个固定大小的画布,会公开一个或多个 渲染上下文(画笔),使用 渲染上下文来绘制和处理要展示的内容。 ​ 我们重点研究 2D渲染上下文。 其他的上下文我们暂不研究,比如, WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。

  2.3 检测支持性 […]

龙生   03 Dec 2022
View Details

canvas详细入门教程(1W字 吐血分享)

简单来说,canvas是HTML5中的标签,它是一个容器,可以使用JS在其中绘制图形或文字。
是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。例如,它可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。

龙生   02 Dec 2022
View Details

使用 CSS 解决 @2x 和@3x 图片问题

移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小:
使用css通过@media 判断像素比去切换不同照片如下 再通过css预处理器封装为一个公用方法 方便使用

龙生   29 Nov 2022
View Details

CSS单位与尺寸参数

px
常用的单位,即像素pixel缩写,但通常被当做绝对单位,但严格说并不是,因为官方考虑到观看不同设备显示屏时,使网页设计出的某一图形的显示大小在人眼中的观看效果差不多,而定义的一个相对值,即人以一臂之遥观看96DPI的显示屏的角度,大概就是利用透视的近大远小原理,照顾不同设备的最终观看效果。

比如某网页图形设置为一固定的px值,在手机浏览器上显示是用直尺测大概1cm,但是同样在不缩放情况下,电脑显示屏测量可能就是1.5cm左右,如果是打印机打印出来的话也许就是2cm左右了。

em
常用的相对单位,前面的数字是比例,即相对于父元素的字体尺寸的比例,比如父元素字体16px,子元素设置1em,也可以理解为100%,那么子元素也是16px,同样,2em就是200%,32px,也可以是小数0.2em,1.5em等等。

rem
类似于em,但rem是相对于根元素html,例如用css标签选择器给html标签设置字体尺寸font-size大小为20px,那么文档中的每个1rem就代表20px,1.5em代表30px,以此类推。

in,cm,mm
这些虽然是生活中的物体测量单位,但网页的1cm尺寸的元素显示到显示器上,用直尺测量通常不是标准1cm,因为css已经默认设置1in=96px,前面也讲过px会因显示屏而不同,因此最终尺寸也不是绝对的,其他也差不多,所以这类尺寸很少用。

龙生   29 Nov 2022
View Details

利用js实现 禁用浏览器后退

也是查找了好多资料才找到的,这种方式,可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。

  现在,我们项目中就使用了第三种方式。在常用浏览器中,都可以禁用了后退。

  mb里可以直接配置项禁用回退 wkeSetDebugConfig(webview, "backKeydownEnable", "0")   from:利用js实现 禁用浏览器后退 (jvbaopeng.com)

龙生   29 Nov 2022
View Details
1 4 5 6 60