canvas

作者: 阿龙哟 | 来源:发表于2018-10-10 12:14 被阅读0次

    全局事件 就是什么地方都可以用!!

    无论一个页面由多少个js文件,他们共同汇聚成了一个全局环境

    fillRect(x,y,width,height);

    绘制一个填充的矩形

    strokeRect(x,y,width,height)

    绘制一个矩形的边框

    鼠标事件

    onmousedown
    onmousemove
    onmouseup

    画圆

    var canvas = document.getElementById('xxx')
    var context = yyy.getContext('2d')
    
    function drawCircle(x,y,radius){
      context.beginPath() // 开始画了啊
      context.fillStyle = 'back'//填充颜色是黑色
      context.arc(x,y,radius,0,Math.PI*2)//x,y坐标,radius半径,0起始角度,2pi结束角度
    context.fill()//填色
    }
    

    划线

    function drawLine(x1,y1,x2,y2){
      context.beginPath()
      context.strokeStyle = 'black'//描边颜色是黑色
      context.moveTo(x1,y1)//起点
      context.lineWidth = 5//线的宽度
      context.lineTo(x2,y2)//终点
      context.stroke()//描边
      context.closePath()
    }
    

    canvas 不能通过css来调整宽高,图形会随着界面等比例缩放所以只能用js来控制

    document.documentElement.clientWidth
    document.documentElement.clientHeight

    千万不要用一个按钮来控制多个事件,一个按钮就对应一个事件就好

    移动端

    meta标签

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

    touch事件与鼠标mouse事件类似,有touchstart,touchmove,touchend

       canvas.ontouchstart = function(){
         console.log('开始摸我了')
       }
    
       canvas.ontouchmove = function(){
         console.log('边摸边动')
       }
    
       canvas.ontouchend = function(){
         console.log('摸完了')
       }
    

    xxx.ontouchstart如果不支持的话就会显示undefined
    支持且未初始化的话就是null

    如何下载canvas图片

      download.onclick = function(){
        var url = yyy.toDataURL("image/png")
        var a = document.createElement('a')
        document.body.appendChild(a)
        a.href = url
        a.download = 'myCanvas'
        a.target = '_blank'
        a.click()
      }
    

    局域网调试

    在同一无线网下,手机访问本机IP地址 加上端口
    比如说我的IP是192.168.1.105,在手机端输入192.168.1.105:8080即可实现局域网调试

    相关文章

      网友评论

          本文标题:canvas

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