求帮看想在Html5中实现鼠标点击划线有什么问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

求帮看想在Html5中实现鼠标点击划线有什么问题

2016-06-07 13:39:24 2047 1
 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>划线</title>
<script language="javascript" type="text/javascript">
var c=document.getElementById("myCanvas");
var can=c.getContext("2d");

can.strokeStyle="rgb(0,182,0)";
var pois=new Array();
        can.lineWidth=2;
        mycanvas.onmousedown=function(e){
            can.clearRect(0,0,500,500);
            e=window.event||e;
            var sX=e.pageX-this.offsetLeft;
            var sY=e.pageY-this.offsetTop;
            var poi=Object.create({x:sX,y:sY});
            pois.push(poi);
            if(pois.length==1)
            {
                can.beginPath();
            }
            if(pois.length>1)
            {
                 can.moveTo(pois[0].x,pois[0].y);
                for(var i=1;i<pois.length;i++)
                {
                 can.lineTo(pois[i].x,pois[i].y);
                }
            can.stroke();
            }

}


取消 提交回答
全部回答(1)
  • wjin06
    2019-07-17 19:29:52

    画线前要ctx.beginPath下,清除上次的路径,不管pois.length是否为1都要的

    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 57013浏览量 回答数 19

1

回答

支付宝H5 下载的时候,提示 【请确保该下载文件来源安全,如需浏览,请长按网址复制后使用浏览器访问】

游客ptexzird3doe2 2019-10-14 15:29:54 69634浏览量 回答数 1

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 93879浏览量 回答数 28

65

回答

第一期阿里云高校工作坊申办启动

柚子菌 2017-08-10 17:04:08 43816浏览量 回答数 65

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 47124浏览量 回答数 19

1

回答

H5 直播的疯狂点赞动画是如何实现的?(附完整源码)

剑曼红尘 2020-04-15 19:03:48 35318浏览量 回答数 1

58

回答

技术入门问答集锦,涉及多种技术方向,解决新人学习困惑

管理贝贝 2016-08-03 10:13:27 52774浏览量 回答数 58

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80503浏览量 回答数 13

61

回答

阿里云OSS需求汇总帖,有需求请进来说说

enj0y 2012-09-05 08:40:29 41535浏览量 回答数 61

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 47456浏览量 回答数 46
2736
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载