A18&19-canvas画板

作者: 半斋 | 来源:发表于2018-03-04 15:06 被阅读0次

A18&19-canvas画板
画板和参考线 | AI从入门到精通
《画板》
画板
画板
画板
画板
画板
画板
画板

a18 canvas

// 按下鼠标
document.onmousedown = function(){}

// 移动鼠标
document.onmousemove = function(){}

// 松开鼠标
document.onmouseup = function(){}

api -Application Programming Interface（应用程序接口）

别人提供给你可以调用的东西，就是api
比如上面三个就是浏览器提供给我们监听鼠标动作的api

<canvas width=300 height=300></canvas>
// 默认 display: inline-block;
// 默认有 width: ; height: ;(标签内) 不会因为设置 display: block; 就自动拉伸 
// canvas画布大小由标签内宽高决定，如果使用css调整高度，会导致 canvas画布 等比缩小或者放大，类似图片
// 一搬不建议用 css 控制canvas的初始宽高

// 接上面，画一个绿色的矩形
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); // 获取它的 2d 上下文

ctx.fillStyle = 'green';  // 填充颜色  **填充颜色必须在绘制矩形前执行，当绘制矩形后就无法改变颜色了
ctx.fillRect(10, 10, 100, 100); 
// 绘制矩形
// fillRect(x, y, width, height) 绘制一个填充的矩形
// strokeRect(x, y, width, height) 绘制一个矩形的边框
// clearRect(x, y, width, height)清除指定矩形区域，让清除部分完全透明

绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
以下是所要用到的函数：
beginPath() 似乎只有 rectangle不需要此函数
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。

生成路径的第一步叫做beginPath()。
本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，
所有的子路径（线、弧形、等等）构成图形。
而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，

第一条路径构造命令通常被视为是moveTo（），无论最后的是什么。
出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

第二步就是调用函数指定绘制路径，本文稍后我们就能看到了。

第三，就是闭合路径closePath(),不是必需的。
这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。
如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，
所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

// 绘制三角形
ctx.fillStyle = 'green';  // 如果不写的话默认使用前面最后一个定义的颜色
ctx.beginPath();  // 表示要开始了
ctx.moveTo(75,50);  // 起始位置
ctx.lineWidth = 10;  // 设置线段宽度
ctx.lineTo(100,75);  // 移动到的坐标，想象一笔划过去的位置
ctx.lineTo(100,25);  // 然后是第二笔的坐标
ctx.fill();  // 填充

移动笔触
一个非常有用的函数，而这个函数实际上并不能画出任何东西，
也是上面所描述的路径列表的一部分，这个函数就是moveTo()。
或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

moveTo(x, y)
将笔触移动到指定的坐标x以及y上。
当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。
我们也能够使用moveTo()绘制一些不连续的路径。看一下下面的笑脸例子。
我将用到moveTo()方法（红线处）的地方标记了。

// 画圆
// arc(x, y, radius, startAngle, endAngle, anticlockwise)
// 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），
// 从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
// 注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
ctx.beginPath()
ctx.arc(10, 10, 20, 0 ,Math.PI*2);
ctx.fill()

// 获取页面宽高
var pageWith = document.documentElement.clientWidth
var pageHeight = document.documentElement.clientHeight

var canvas = document.getElementById('canvas');
// 设置宽高，这时候设置的是 <canvas> 的属性值，而不是样式里的宽高
canvas.width = pageWith
canvas.height = pageHeight

// 当窗口大小改变
window.onresize = function(){}

// 一个按钮只做一件事
<button id="eraser"></button>
<button id="brush"></button>

a19-画板续

// 适应手机
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">


// 监听手指对手机的操作，对应onmouse的三个事件
canvas.ontouchstart = function(){
  console.log("开始触摸")
}
canvas.ontouchmove = function(){
  console.log("边摸边动")
}
canvas.ontouchend = function(){
  console.log("停止触摸")
}

// 如果设备不支持 ontouch 事件，也就是设备不支持触摸操作
console.log(canvas.ontouchstart)  // undefined, 没有被初始化
// 如果设备支持 ontouch 时间
console.log(canvas.ontouchstart)  // null, 被初始化为 null


// 通过 in 操作符知道一个属性名是否是一个hash的key，比如：
var hash = {
  a:1,
  b:2,
  c:3
}
console.log("a" in hash) // true
console.log("d" in hash) // false


if(document.body.ontouchstart !== undefined){ // 特性检测，检测是否具备某种特性
  // 触屏设备
}
else{
  // 非触屏设备
}

与鼠标事件里的event获得的clientX、clientY不同，
touch事件的event获得的clientX、clientY 放在 touches 数组的第 0 项的 Touch 哈希里，
这是因为和非触屏设备不同，触屏设备，比如手机，是支持多点触控的，而电脑则是只有一个鼠标，
所以当多点触控的时候，不止一个触摸点，第1个手指的位置放在第0项，第2个放在第1项，以此类推

F12 查看touchevent的代码

TouchEvent{
  ...
  touches: TouchList // 这两处应该是是浏览器自己添加的名称，因为调用的时候并不需要写
    0: Touch         // 这里
      clientX: xx
      clientY: yy
      ...
    target: canvas#xxx
    ...
}
// 获得touch处的clinetX/Y
event.touches[0].clientX
event.touches[0].clientX

// 添加class（在已有class的基础上）
xxx.classList.add('className')
// 删除class（在现有class中）
yyy.classList.remove('className')
[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList)

// 禁止滚动条 css
body{
  overflow: hidden;
}
// 如果不行的话，使用js来实现，手机出现bug不能使用，此方法失败
document.body.ontouchstart = function(event){
  event.preventDefault()  // 阻止默认
}
// 将canvas绝对定位
#canvas{
  position: fixed;
  top: 0;
  left: 0;
}

// 清空canvas
context.clearRect(0, 0, canvas.width, canvas.height)

// 将图画下载
var url = canvas.toDataURL()
var a = document.createElement('a')
a.href = url
a.download = "aaa.jpg"
a.click()