2 qwfy 0520 qwfy_0520 于 2016.03.09 09:30 提问

求帮看想在Html5中实现鼠标点击划线有什么问题
 <!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();
            }

}





4个回答

showbo
showbo   Ds   Rxr 2016.03.09 20:37
已采纳

你canvas对象都没放。。代码没有问题,除了mycanvas.onmousedown=function(e){....} 不能直接用id访问,改为c变量

 <canvas id="myCanvas"></canvas>
<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;
        c.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();
            }

}

</script>
dcxy0
dcxy0   Ds   Rxr 2016.03.09 09:40
qwfy_0520
qwfy_0520 这个是定点划线,想要实现鼠标点击划线
接近 2 年之前 回复
WinsenJiansbomber
WinsenJiansbomber   2016.03.09 12:56

查文档,canvas 文档多啊

pkyi2678752
pkyi2678752   2016.03.09 14:27

mycanvas.onmousedown=function(e){....} 把mycanvas换成c试试

qwfy_0520
qwfy_0520 回复pkyi2678752: 是IE浏览器,但是我用DW编辑器编辑时预览也不行,边框这个尝试了,还是不行,还是非常感谢你
接近 2 年之前 回复
pkyi2678752
pkyi2678752 回复qwfy_0520: 如果还是不行的话,那你估计用的是IE浏览器,IE的话是没有e.pageX,e.pageY之说的,可以把e.pageX 写成 e.pageX ? e.pageX : e.x 。 如果还不行,那我就没得办法了。
接近 2 年之前 回复
pkyi2678752
pkyi2678752 回复qwfy_0520:canvasIE8及以下是不支持的, 不知道你有没有给canvas设置大小,如果没有的话,他是有一个初始固定大小的,你最好加个边框,在边框里面画。出了画布肯定是画不了的!
接近 2 年之前 回复
pkyi2678752
pkyi2678752 回复qwfy_0520: 你用的什么浏览器?
接近 2 年之前 回复
qwfy_0520
qwfy_0520 还是不行。。
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!