JavaScript | LongSheng

HTML canvas lineWidth 属性

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

1

2

3

4

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.lineWidth=10;

ctx.strokeRect(20,20,80,100);

尝试一下 » 浏览器支持 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>元素

1	<canvas id="tutorial" width="300" height="300"></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> 的浏览器则会直接渲染替代内容。用文本替换：

1

2

3

你的浏览器不支持canvas,请升级你的浏览器

</canvas>

用 <img> 替换：

1

2

3

</canvas>

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

1

2

3

var canvas = document.getElementById('tutorial');

//获得 2d 上下文对象

var ctx = canvas.getContext('2d');

2.3 检测支持性 […]

龙生 03 Dec 2022

View Details

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

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

龙生 02 Dec 2022

View Details

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

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

1

2

3

4

5

6

7

//防止页面后退

history.pushState(null, null, document.URL);

window.addEventListener('popstate', function () {

history.pushState(null, null, document.URL);

});

</script>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//禁用浏览器返回

function fobidden_back() {

//防止页面后退

history.pushState(null, null, document.URL);

window.addEventListener('popstate', back_common)

}

//启用浏览器返回

function enable_back() {

history.go(-1);

window.removeEventListener('popstate', back_common)

}

function back_common() {

history.pushState(null, null, document.URL);

}

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

龙生 29 Nov 2022

View Details

JS的实例化方式

模式

1

2

3

4

5

6

7

8

9

10

11

12

13

function obj1(name,age){

this.name=name;

this.age=age;

this.identity=function(){

var li=document.createElement("p");

var txt=document.createTextNode("白小纯");

li.appendChild(txt);

document.body.appendChild(li);

}

var person2=new obj1('白小纯',123);

person2.identity();

alert(person2.name);

工厂模式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function obj2(){

var lio=new Object(); //创建对象，对象属性赋值

lio.name='lio';

lio.attr='男';

lio.identity=function(){

var li=document.createElement("p");

var txt=document.createTextNode("白小纯");

li.appendChild(txt);

document.body.appendChild(li);

};

return lio;

}

var person=obj2();

//alert(person.name);

原型模式

1

2

3

4

5

6

7

8

9

10

11

12

function obj3(){

//this.name='lio';

}

obj3.prototype.name='lio';

obj3.prototype.identity= function (name) {

alert("实际上是"+name);

};

var person3=new obj3();

//检测是在实例中还是在原型中

alert(person3.hasOwnProperty("name"));

alert(person3.hasOwnProperty("rename"));

person3.identity('白小纯');

混合模式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function obj4(age) {

this.age=age;

this.rename='aaaa';

};

obj4.prototype={

constructor:obj4,

name:'lio',

age:123,

identity: function (name) {

alert(name+"实际上是白小纯");

}

};

var person4=new obj4(18);

alert(person4.hasOwnProperty("age"));//true

person4.identity('lio');

from:https://blog.csdn.net/Amouzy/article/details/125974435

龙生 16 Aug 2022

View Details

使用axios请求，前端数字long类型精度问题解决方法

今天开发遇到个问题，服务器后端的Long类型数据，传到前端会出现精度丢失，如：164379764419858435，前端会变成164379764419858430。

在浏览器中做测试可知，这就是一个精度丢失的问题。

前端使用的axios来发起请求的，最开始以为是浏览器的问题，但是通过postman来请求是没问题，打开浏览器开发工具，在xhr下的response响应中也是没问题的，代表是请求成功后数据格式化出问题了，下面讲解下各种解决方案。

龙生 02 Jun 2022

View Details

Musicn 高品质音乐下载命令行工具

软件简介 Musicn 是一个下载高品质音乐的命令行工具。安装

1

2

3

4

5

6

# 主推荐pnpm

$ pnpm add -g musicn

# or

$ yarn global add musicn

# or

$ npm install musicn -g

使用

1

2

3

$ musicn 稻香

# or

$ msc 稻香

附带歌词下载 (默认是不附带):

1

2

3

$ msc 稻香 --lyric

# or

$ msc 稻香 -l

指定文件夹路径下载 (默认是当前路径):

1

2

3

$ msc 稻香 --path ../music

# or

$ msc 稻香 -p ../music

资源音乐来源：咪咕（API 是从公开的网络中获得）说明部分歌曲支持无损音乐，支持格式：flac、mp3 优先搜索下载高品质音乐（无损 -> 320K -> 128K）暂时只支持下载咪咕平台上已有的音乐在 windows 的 git Bash 中不支持显示下载进度条并且不支持上下切换选歌，问题是 cli-progress 不兼容 node version > 14 from:https://www.oschina.net/p/musicn

龙生 27 May 2022

View Details

修复JS中toFixed不是真四舍五入的问题

1

2

3

4

5

6

7

function toFixed(num, fixed) {

var times = Math.pow(10, fixed);

var newNum = num * times + 0.5;

newNum = parseInt(newNum, 10) / times;

return newNum;

}

龙生 25 May 2022

View Details

js forEach循环调用异步方法，如何实现同步

准备代码：

const res = []
const arr = [1, 2, 3, 4, 5]

function t(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('定时器', num)
resolve()
}, 1000)

})
}

function t2(item) {
console.log('进入res')
res.push(item)
}

龙生 15 Mar 2022

View Details

OwlCarousel调用方法及参数说明

调用方法：引入jQuery和owl.carousel相关组件

1

2

3

4

HTML

1

2

3

4

5

6

......

</div>

JS调用

1

2

3

$(function(){

$('#owl-example').owlCarousel();

});

参数说明：参数描述默认值 items 幻灯片每页可见个数 5 itemsDesktop 设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false [1199,4] itemsDesktopSmall 同上 [979,3] itemsTablet 同上 [768,2] itemsTabletSmall 同上，默认为 false false itemsMobile 同上 [479,1] itemsCustom singleItem 是否只显示一张 false itemsScaleUp slideSpeed 幻灯片切换速度，以毫秒为单位 200 paginationSpeed 分页切换速度，以毫秒为单位 800 rewindSpeed 重回速度，以毫秒为单位 1000 autoPlay 自动播放，可选布尔值或整数，若使用整数，如 3000，表示 3 秒切换一次；若设置为 true，默认 5 秒切换一次 false stopOnHover 鼠标悬停停止自动播放 false navigation 显示“上一个”、“下一个” false navigationText 设置“上一个”、“下一个”文字，默认是[“prev”,”next”] [“prev”,”next”] rewindNav 滑动到第一个 true scrollPerPage 每页滚动而不是每个项目滚动 false pagination 显示分页 true paginationNumbers 分页按钮显示数字 false responsive responsiveRefreshRate 每 200 毫秒检测窗口宽度并做相应的调整，主要用于响应式 200 […]

龙生 28 Jan 2022

View Details