美文网首页
A18&19-canvas画板

A18&19-canvas画板

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

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()

相关文章

  • A18&19-canvas画板

    a18 canvas api -Application Programming Interface(应用程序接口)...

  • 画板和参考线 | AI从入门到精通

    画板 Artboards 1. 怎么创建多个画板 方法1:文件 - 新建,修改画板数目。点击更多设置,可设置画板的...

  • 《画板》

    文/依风 看着旧旧的画板 想着我们的那年那天 一起坐在河边 画着静静的山 水里倒影着你的容颜 和浅浅酒窝的笑脸 停...

  • 画板

    在很小的时候 我决定发现一点不如意就 在我的画板上 抹下一个小黑点 过了一年 我的画板就变成 纯黑的了 我决定发现...

  • 画板

    高二的暑假 每天拿着工具箱顶着烈日 走半个小时的路到画室 流着汗坐在风扇下就是三四个小时 画画的时候 脑海里...

  • 画板

    画板 搭建界面 顶部viewUIToolbar,会自动对里面的控件做自动布局在toolbar里面拖入item保存按...

  • 画板

    一出身 我们每个人都拥有一块白色的画板 有人把亲情涂成红色 有人把友情涂成橙色 有人把爱情涂成紫色 每个人根据自己...

  • 画板

    用户动作:按下去,动,松开鼠标三个动作完成画画 利用相对定位把创造一个个的黑圈圈放在它该在的地方,注意div1的s...

  • 画板

    —献给迷失在爱情里的你们 是谁的画板呀 在青春的脸上 写满了涂鸦 画中的世界 五颜六色 你却困在破旧的 小屋里 听...

  • 画板

    当落日告诉你今天即将结束不要难过新的一天即将开始今天注定要成为过去何必为了失意的泪水打湿了明天早上的阳光你要亲手拿...

网友评论

      本文标题:A18&19-canvas画板

      本文链接:https://www.haomeiwen.com/subject/pbvxfftx.html