canvas

编程进行时

从例子canvas角度去思考开发问题。用户需求：想要一个在手机和电脑上都能运行的画板。

第一步：分析问题，画板需要用户点击，那点击的动作怎么获取？第二步：近似对象的值怎么区分？第三步：满足常态的测试，进行「变态」的测试

使用console.log将函数/所以事件打印出来，看Document有哪些元素可以使用，采用「极端或绝对」的情况作为参考，如：获取屏幕的x、y轴，只需要在左上角点击看打印出来的数据是什么，加入「变态」的情况测试，加文本、加定位、令页面滑动等等看数据是否符合开发需要。

有时候遇到样式问题，可以查看display或者position，这些css样式会影响渲染效果。

思考不同结构

不同场景有不同结构（手机与电脑，触屏和鼠标事件）

手机和电脑的操作不同，事件的操作自然不同，移动设备如何被识别？

寻找关键问题：Google 如何判断是否移动设备？

方法一

  var is_mobile = navigator.userAgent.toLowerCase().match(/(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
  if (is_mobile) {
    window.location.href = "手机端";
  } else {
    window.location.href = "PC端";
  }

方法二使用navigator.platform查看访问设备与硬件

var system ={  
win : false,  
mac : false,  
xll : false  
};  
//检测平台  
var p = navigator.platform;  
system.win = p.indexOf("Win") == 0;  
system.mac = p.indexOf("Mac") == 0;  
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);  
//跳转语句，如果是手机访问就自动跳转到caibaojian.com页面  
if(system.win||system.mac||system.xll){  
}else{  
window.location.href="http://caibaojian.com";

// 检测是否触屏设备
var isTouchDevice = 'ontouchstart' in document.documentElement;

记录遇到的坑

嵌入函数里面的函数形成闭包无法判断停掉

let isHold = false;
canvas.onmousedown = () =>{
    isHold = true
    if(isHold === true){
        canvas.onmousemove = (e) => {
            ctx.fillRect(e.clientX - 3, e.clientY -3 , 6, 6);
        }
    }
}
canvas.onmouseup = (e) =>{
    isHold = false
    console.log('12')
}

token 字符串

SyntaxError 语法错误

Window

所有函数都挂靠着window之上，方便函数都可以直接使用。浏览器开启时至少有以下函数被加载。

console
Document
Object
Array[]
Function()

Window变量和window对象是两个东西

变量是一个容器，可以存放window对象

原型让你无需重复声明共有的属性，对象只保存地址，共有属性

超过两层的共有属性无法被修改，只有读取权

var obj = [];
var obj2 = [];
obj.toString = 'xxx';
obj.toString === obj2.toStrong; // false

.container {
	margin-top: 12px;
}

.ovfHiden {
	height: auto !important;
}

.caption {
	font-size: 16px;
	text-align: left;
	margin-top: 5px;
	color: #666;
}

.modal-middle.optTic {
	text-align: center;
}

.list-l-r .list-h {
	display: block;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: rgba(74, 81, 95, 1);
	line-height: 1.5;
	height: 100%;
}

.user-info {
	background: #FFFFFF;
	box-shadow: 0 4px 12px 6px rgb(112 141 242 / 14%);
	border-radius: 12px;
	line-height: 1.6;
}

.user-info > .flew-vertical {
	line-height: 48px;
	border-bottom: 1px solid #f6f6f6;
	font-size:18px;
}

.user-info > .flew-vertical:last-child {
	border: none;
}

.list-h p:last-child {
	font-weight: normal;
}

.list-h.p-layout {
	padding-bottom: 0;
}

* {
	padding: 0;
	margin: 0;
}

html {
	color: #4A515F;
	background-color: #EDF3FF;
}

button {
	border: none;
}

button:focus {
	outline: none;
}

a {
	text-decoration: none;
}

input {
	background: none;
	outline: none;
	border: 1px solid #ccc;
}

input:focus {
	border: none;
}

input[type="radio" i], input[type="checkbox" i] {
	border: 1px solid #989CAB;
	border-radius: 20px;
	width: 18px;
	height: 18px;
	appearance: none;
	margin-right: 6px;
}

input[type="radio"]:checked {
	background: url(../../images/icon/input-radio.png);
	background-size: 100%;
	border: none;
}

input[type="radio"]:checked + .checked, input[type="checkbox" i]:checked + .checked {
	color: #7590FA;
}

input[type="checkbox" i] {
	border-radius: 4px;
}

input[type="checkbox"]:checked {
	background: url(../../images/icon/input-select.png);
	background-size: 100%;
	border: none;
}

.warring::placeholder {
	color: red;
}

.text-import {
	line-height: 44px;
	background: #EDF3FF;
	box-shadow: 0px 0px 0px 1px rgb(225 232 246);
	border-radius: 8px;
	display: inline-block;
	width: 100%;
	display: block;
	border: none;
	box-sizing: border-box;
	font-size: 1rem;
	padding: 0 16px;
	color: #4a515f;
}

.text-phone {
	line-height: 44px;
	border: none;
	text-align: right;
	font-size: 18px!important;
	color: #666;
}

.label-inline {
	display: flex;
	align-items: center;
	font-size: 18px;
}

.p-layout {
	padding: 16px;
}

.m-bottom {
	margin-bottom: 8px;
}

.list-content-title{
	font-size:18px;
	line-height: 1.6;
	font-weight:500;
}

.list-content-title.must:before {
	content: "*";
	color: red;
}

.list-content-title.choose-single:after {
	content: "单选";
	color: white;
	background: #7590FA;
	border-radius: 4px;
	padding: 4px 6px;
	font-size: 14px;
	line-height:14px;
	margin-left: 5px;
}

.list-content-title.choose-multiple:after {
	content: "多选";
	color: white;
	background: #1AC4AA;
	border-radius: 4px;
	padding: 4px 6px;
	font-size: 14px;
	line-height:14px;
	margin-left: 5px;
}

.bg-white {
	background-color: #fff;
}

.list-answer {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 8px;
}

.bg-blue {
	background: #7ba1fe;
}

.main-btn {
	color: white;
	display: block;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 1.2rem;
	border-radius: 25px;
	width: 100%;
}

.sign-info {
	border: 1px solid #e3e3e3;
	position: relative;
}

.sign-tips {
	position: absolute;
	font-size: 24px;
	color: #eee;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.user-promise {
	font-size: 14px;
	color: red;
}

.flew-vertical {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flew-vertical > span {
	color: #989cab;
}

#canvas {
	margin: 0 auto;
	display: block;
}

.canvas-btn {
	padding: 2px 8px;
	color: #333;
	background: #eee;
	border-radius: 8px;
	font-size: 14px;
}

.p-layout.warring {
	background: #ffe3e3;
}

canvas

编程进行时​

思考不同结构​

记录遇到的坑​

Window​

编程进行时

思考不同结构

记录遇到的坑

Window