最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

canvas画板（鼠标和触摸）

来源：博客园


(资料图片仅供参考)

        canves    
    
<script type="text/javascript">    var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    var base64data="";    canvas.width="320"    canvas.height="240"    //页面不出现滚动滑动    $("html,body").css("overflow","hidden").css("height","100%");    document.body.addEventListener("touchmove", self.welcomeShowedListener, false);    //画一个黑色矩形    ctx.fillStyle = "rgba(225,225,225,0)";//绘制填充颜色 透明色    ctx.fillRect(0, 0,320,240);//绘制一个被填充的矩形    //按下标记    var onoff = false;    //定义起始位置    var oldx = 0;    var oldy = 0;    //设置画笔颜色默认为黑色    var linecolor = "black";    //画笔宽度默认为4    var linw = 4;    //判断是触摸还是鼠标    if (document.body.ontouchstart !== undefined) {        //执行touch代码        // 手指按下        canvas.ontouchstart = e => {            painting = true            const event = e.touches[0]            ctx.lineCap = "round"            ctx.lineJoin = "round"            const x = event.pageX            const y = event.pageY            ctx.beginPath()            ctx.moveTo(x, y)            ctx.lineWidth = linw            ctx.strokeStyle = linecolor        }        // 手指移动        canvas.ontouchmove = e => {            if (!painting) {                return            }            const event = e.touches[0]            const x = event.pageX            const y = event.pageY            ctx.lineTo(x, y)            ctx.stroke()        }        // 手指抬起        canvas.ontouchend = () => {            if (!painting) {                return false            }            painting = false            ctx.closePath()        }        // 手指离开区域        ontouchcancel = () => {            if (!painting) {                return false            }            painting = false            ctx.closePath()        }    } else {        //鼠标移动事件，事件绑定        // 执行mouse代码        canvas.addEventListener("mousemove", draw);        canvas.addEventListener("mousedown", down);        canvas.addEventListener("mouseup", up);    }    // 下笔时按下标记打开，给oldx、oldy赋值    function down(event) {        onoff = true;        oldx = event.pageX;        oldy = event.pageY;    }    //检测鼠标离开后，按下标记关闭    function up() {        onoff = false;    }    //画图，按下标记打开    function draw(event) {        if (onoff == true) {            var newx = event.pageX ;            var newy = event.pageY;            // 起始一条路径，或重置当前路径。            ctx.beginPath();            // 把路径移动到画布中的指定点，不创建线条。            ctx.moveTo(oldx, oldy);            // 添加一个新点，然后在画布中创建从该点到最后指定点的线条。            ctx.lineTo(newx, newy);            // 设置或返回用于笔触的颜色、渐变或模式。            ctx.strokeStyle = linecolor;            // 设置或返回当前的线条宽度。            ctx.lineWidth = linw;            // 设置或返回线条的结束端点样式。            ctx.lineCap = "round";            // 绘制已定义的路径。            ctx.stroke();            oldx = newx;            oldy = newy;        }    }    // 生成图片    function generate_picture() {            const dataImg = new Image();            // canvas生成图片            dataImg.src = canvas.toDataURL("image/png");    };    //清理画布    function clear_all() {            ctx.fillStyle = "rgba(225,225,225,0)";            ctx.fillRect(0, 0, 320,240);    };    // 下载图片    function download_picture() {        const dataImg = new Image();        dataImg.src = canvas.toDataURL("image/png");        document.querySelector("#image").appendChild(dataImg)        const alink = document.createElement("a");        alink.href = dataImg.src;        alink.download = "testImg.jpg";        alink.click();    }</script>

关键词： 生成图片 画笔颜色 鼠标移动