<!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();
}
}
求帮看想在Html5中实现鼠标点击划线有什么问题
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
4条回答
- Go 旅城通票 2016-03-09 12: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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥50 永磁型步进电机PID算法
- ¥15 sqlite 附加(attach database)加密数据库时,返回26是什么原因呢?
- ¥88 找成都本地经验丰富懂小程序开发的技术大咖
- ¥15 如何处理复杂数据表格的除法运算
- ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
- ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
- ¥200 uniapp长期运行卡死问题解决
- ¥15 latex怎么处理论文引理引用参考文献
- ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?
- ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?