<!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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 数学的三元一次方程求解
- ¥20 iqoo11 如何下载安装工程模式
- ¥15 本题的答案是不是有问题
- ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
- ¥15 C++使用Gunplot
- ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
- ¥15 matlab数字图像处理频率域滤波
- ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
- ¥15 ELGamal和paillier计算效率谁快?
- ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题