0
点赞
收藏
分享

微信扫一扫

canvas画图板要点总结

陆佃 2021-09-30 阅读 53

Note

思路第一步:画一个点,然后移动打点

  1. onclick:鼠标点击事件
  2. 让鼠标的尖尖为圆圈的原点(div)


  3. onmousemove:鼠标移动


    效果:每次移动都会画点,JS与CSS是跨线程通信,较慢,使线条不连贯且性能较差。
  4. 在html上写的宽高是会被CSS覆盖
    canvas中设定好长宽之后,若用css强行修改,会拉伸canvas图形使其模糊。
  5. 当用户鼠标移动时,浏览器会调用canvas.onmousemove,给它传参数,就是e
  6. 不能直接在HTML标签里添加长宽的单位,因为单位是css属性,而标签是HTML的,而且加了也没用。
  7. 使body占满视口
    1. display: block
      查看Computed,body为内联元素,内联元素的高度是其内容高度,所以将内联元素改为块元素

    2. height: 100vh;width: 100vw;意思是长宽为视口长宽

  8. 7因为4的缘故,会使图形模糊,所以删掉css样式,在HTML里面设置。(图片里为canvas)



    读取视口长宽传给canvas的长宽。

思路第二步:点连成线

  1. canvas.onmousedown:鼠标按下

  2. canvas.onmouseup:鼠标放开

  3. 将方块换成圆形,并且为实心
    https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
    在网上多查文档

  4. var isTouchDevice = 'ontouchstart' in document.documentElement;:可以在手机上使用
    搜索手机可支持设备,用console.log去一个一个试
    还需要用开发者工具去找手机上手指触屏的位置信息

  5. 在文档中找线的绘制方法
    需要注意的是连线为上一个点到现在的点,所以需要两个坐标,分别为上一次与这次的。


  6. ctx.lineWidth = 10:在调大线条宽度时,发现点与点之间的连线很细,显的线条很粗糙。
    ctx.lineCap = "round":可以使线条点与点之间填充圆形。
    根据文档lineCap可以设置线条末端样式
    butt
    线段末端以方形结束。
    round
    线段末端以圆形结束。
    square
    线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。
    "round" 和 "square" 值会使线条略微变长。

  7. canvas.ontouchstart:手指触摸屏幕

  8. 将代码也放进手机端里面

举报

相关推荐

0 条评论