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
View Details一、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,请升级你的浏览器 </canvas> |
用 <img> 替换：
|
1 2 3 |
<canvas> <img src="./美女.jpg" alt=""> </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 检测支持性 […]
View Details简单来说，canvas是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。
是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。
移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:
使用css通过@media 判断像素比去切换不同照片如下 再通过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会因显示屏而不同，因此最终尺寸也不是绝对的，其他也差不多，所以这类尺寸很少用。
也是查找了好多资料才找到的，这种方式，可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。
|
1 2 3 4 5 6 7 |
<script language="javascript"> //防止页面后退 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)
View Details前言：项目迁移，在调用uni.request去请求微信的接口时报错：
|
1 |
errMsg: "request:fail -2:net::ERR_FAILED" errno: 600001 |
返回代码：600001。 pc端工具能访问接口成功，估计是勾选了不效验合法域名的原因，而手机端就显示报错。 查阅了一下微信开放文档，提示是token太长；但我排查了一下我的token，不存在这个问题。 接着直接在百度里找，找到了原因：项目迁移用了一个新域名，而这个域名的证书链有问题，请检查你的域名的证书链，看看是否存在证书链错误，具体设置证书链是由后端完成的，我这里贴出2个我找到的解决方案。 链接1：https://blog.csdn.net/anjingshen/article/details/116926409 链接2：https://blog.csdn.net/Cike___/article/details/109544449 检测域名证书是否正确，可用一下两个网站（网站链接来之上面两个链接）： 域名证书检测网站1：https://www.digicert.com/help/ 域名证书检测网站2：https://myssl.com/ from:https://www.cnblogs.com/iuniko/p/16190740.html
View Detailsgulp作用：
Sass编译
Css Js 图片压缩
Css Js 合并
Css Js 内联
Html的include功能
Autoprefixer
自动刷新
去缓存
Handlebars模板文件的预编译
雪碧图
ESLint rem移动端适配方案
最近写项目时发现通过meta标签已无法禁止移动端双指缩放，一般的js写法也无法阻止，最终解决方案如下： 重点：passive
|
1 2 3 4 5 6 |
//禁止双指放大 document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, {passive:false}); |
如果需要该事件，页面写入以下代码即可：
|
1 2 3 4 5 |
document.documentElement.addEventListener('touchstart', function (e) { e.returnValue = true; }, false); |
from:https://www.cnblogs.com/zeosky-zhe/p/13599945.html
View Details在ios10前我们能通过设置meta来禁止用户缩放页面：
|
1 |
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> |
监听事件进行判断
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
window.onload = function() { // 阻止双击放大 var lastTouchEnd = 0; document.addEventListener('touchstart', function(event) { if (event.touches.length > 1) { event.preventDefault(); } }); document.addEventListener('touchend', function(event) { var now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false); // 阻止双指放大 document.addEventListener('gesturestart', function(event) { event.preventDefault(); }); } |
from:https://www.jianshu.com/p/923e63cb3390
View Details