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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
【实例】html5-canvas通过鼠标绘制线段
body { background: #eeeeee; } #controls { position: absolute; left: 25px; top: 25px; } #canvas { background: #ffffff; cursor: pointer; mar
html添加下划线,下划线颜色,字体颜色,下移,且鼠标为手型
查看物资采购价格
unity--鼠标画线、画图实现
在untiy有时候需要用到画线,比如说在做签名或者画图的时候,主要用的组件就是LineRenderer实现代码 using UnityEngine; using System.Collections; public class TextNGUI : MonoBehaviour { /// /// 鼠标画图功能 /// private GameObject
在OpenCV中利用鼠标绘制直线
原文 鼠标绘制直线源代码: #include #include #include #pragma comment( lib, "cv.lib" ) #pragma comment( lib, "cxcore.lib" ) #pragma comment( lib, "highgui.lib" ) IplImage* src = 0; IplImage* dst = 0; void
unity3D 鼠标点击拖动画线(平面)
using UnityEngine; using System.Collections; public class Test : MonoBehaviour { public Material mat; public Color color = Color.red; public Vector3 pos1; public Vector3 pos2; publ
【Unity】unity 鼠标画线
先看一下效果. 代码其实很简单 private GameObject clone; private LineRenderer line; private int index; public GameObject tf; // Update is called once per frame void Update() {
js css 实现导航栏下划线鼠标跟随效果
pc网页端商城导航栏鼠标滑过会出现下划线,接下来就是实现鼠标滑过出现下划线的动画效果 用到的知识 css的伪元素选择器 ::before。 效果图如下: 下划线的效果一般是给元素添加boder-bottom实现的,但这是一个生硬的效果,为了给下划线添加动画效果,我们使用伪元素选择器,通过::before设置border-bottom已达到下划线的动画跟随效果,代码如下: &amp;lt;!DOC...
HTML canvas原生js实现鼠标画图
这是一篇对于当前流行的HTTML5 canvas 鼠标画图的总结
(11)HTML5-鼠标单击事件监听
JavaScript是一种面向对象的程序设计语言,因此语言的基本结构会包含对象(object),方法(method)和数值(value)三个要素,指令如下: 对象:JavaScript中已经声明了多种对象供开发人员调用,方便我们快速处理画面中可能发生的互动需求,常用的对象包括文档(document),窗口(window),变量(var),数学运算(math),字符串(string),图片(pic
css导航栏选中是有移动下划线的效果
技术不行,拿百度前端学院题目练习,其中遇到一个导航栏,每当选中一个选项,下面出现一个下划线标注。我本来想直接省掉这个功能,后来觉得这样学习估计什么都学不到。后来思考和查阅,记录如下。大概是这么个效果: HTML代码: Time of new life