自己看，别人看了没用，画图和测量基础学习

最新推荐文章于 2024-02-28 09:39:54 发布
最新推荐文章于 2024-02-28 09:39:54 发布
阅读量547 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sayesan/article/details/48028273
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</title>
</head>
<body><!DOCTYPE>
<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/jqplot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript">
	var list=[];
	var currentC;
	var _e={};
    var cricle = function(x,y,r){
    	this.x=x;
    	this.y=y;
    	this.r=r;
    	this.isCurrent=false;
    	this.drawC=function(ctx,x,y){
    		ctx.save();
    		ctx.beginPath();
    		ctx.moveTo(this.x,this.y-this.r);
			ctx.arc(this.x,this.y,this.r,2*Math.PI,0,true);
			if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) {


					
					ctx.fillStyle = '#ff0000';
					currentC=this;
					this.isCurrent=true;


			}else{
				ctx.fillStyle = '#999999';
			}
			ctx.fill();
    	}
    
    }
	function draw(){
		var canvas = document.getElementById('tutorial');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			for(var i=0;i<10;i++){
				var c=new cricle(20*i,20*i,5*i);
				c.drawC(ctx);
				list.push(c);
			}
		}
	}
	
	function reDraw(e){
		e=e||event;
		var canvas = document.getElementById('tutorial');
		var x = e.clientX - canvas.offsetLeft;
		var y = e.clientY - canvas.offsetTop;


		canvas.width = canvas.width;
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			for(var i=0;i<list.length;i++){
				var c=list[i];
				c.drawC(ctx,x,y);


				
			}
		}
	
	}
	
	function show(e){
		e=e||event;
		var canvas = document.getElementById('tutorial');
		var ctx = canvas.getContext('2d');
		var x = e.clientX - canvas.offsetLeft;
		var y = e.clientY - canvas.offsetTop;


		if(currentC){
			currentC.x=parseInt(x+(x-currentC.x)/5);
			currentC.y=parseInt(y+(y-currentC.y)/5);
		}
		_e=e;




	}


	window.οnlοad=function(){
		
		var canvas = document.getElementById('tutorial');
		draw();
		
		canvas.οnmοusedοwn=function(e){
			e=e||event;
			var x = e.clientX - canvas.offsetLeft;
			var y = e.clientY - canvas.offsetTop;
			if(currentC)
				currentC.isCurrent=false;
			currentC=null;
			reDraw(e);
			_e=e;
			var showTimer=setInterval(function(e){
				reDraw(e);
			},10,_e);
			canvas.οnmοusemοve=show;


			document.οnmοuseup=function(){
				if(currentC)
					currentC.isCurrent=false;
				currentC=null;
				canvas.οnmοusemοve=null;
				clearInterval(showTimer);
			}


		}
	}
</script>
<style type="text/css">
  canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#eeeeee;">
    <canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
</body>
</html></body>
</html>

<!DOCTYPE>
<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/jqplot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript">
	var list=[];
	var currentC;
	var _e={};
    var cricle = function(x,y,r){
    	this.x=x;
    	this.y=y;
    	this.r=r;
    	this.isCurrent=false;
    	this.drawC=function(ctx,x,y){
    		
    		var c=document.getElementById("tutorial");
        var cxt=c.getContext("2d");			


        var img = new Image()
        img.src = "Untitled.jpg"
        cxt.drawImage(img, 0, 0);
    		ctx.save();
    		ctx.beginPath();


			ctx.arc(this.x,this.y,this.r,0,2*Math.PI,0,true);
			if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) {


					
					ctx.fillStyle = '#ff0000';
					currentC=this;
					this.isCurrent=true;


			}else{
				ctx.fillStyle = '#999999';
			}
			ctx.fill();






    	}
    
    }
	function draw(){
		var canvas = document.getElementById('tutorial');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			for(var i=0;i<1;i++){
				if(i == 0)
				{
					i = 5;
				}
				var c=new cricle(20*i,20*i,5*i);
				c.drawC(ctx);
				list.push(c);
				if(i == 5)
				{
					i = 0;
				}
    		}
		}
	}
	
	function reDraw(e){
		e=e||event;
		var canvas = document.getElementById('tutorial');
		var x = e.clientX - canvas.offsetLeft;
		var y = e.clientY - canvas.offsetTop;


		canvas.width = canvas.width;
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			for(var i=0;i<list.length;i++){
				var c=list[i];
				c.drawC(ctx,x,y);
			}
		}
	
	}
	
	function show(e){
		e=e||event;
		var canvas = document.getElementById('tutorial');
		var ctx = canvas.getContext('2d');
		var x = e.clientX - canvas.offsetLeft;
		var y = e.clientY - canvas.offsetTop;


		if(currentC){
			currentC.x=parseInt(x+(x-currentC.x)/5);
			currentC.y=parseInt(y+(y-currentC.y)/5);
		}
		_e=e;
	}


	window.οnlοad=function(){
		
		var canvas = document.getElementById('tutorial');
		draw();


		canvas.οnmοusedοwn=function(e){
			e=e||event;
			var x = e.clientX - canvas.offsetLeft;
			var y = e.clientY - canvas.offsetTop;
			if(currentC)
				currentC.isCurrent=false;
			currentC=null;
			reDraw(e);
			_e=e;
			  var showTimer=setInterval(function(e){
				reDraw(e);
			  },10,_e);
			canvas.οnmοusemοve=show;


			document.οnmοuseup=function(){
				if(currentC)
					currentC.isCurrent=false;
				currentC=null;
				canvas.οnmοusemοve=null;
				clearInterval(showTimer);
			}


		}
	}
</script>
<style type="text/css">
  canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#eeeeee;">
    <canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
    <!--script>
         var c = document.getElementById("tutorial");
         var cxt = c.getContext("2d");
         var img = new Image()
         img.src = "Untitled.jpg"
         cxt.drawImage(img, 0, 0);
    </script-->
</body>
</html>

自己修改后的
<!DOCTYPE>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/jqplot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript">
    var list=[];
    var currentC;
    var _e={};
    var cricle = function(x,y,r){
        this.x=x;
        this.y=y;
        this.r=r;
        this.isCurrent=false;
        this.drawC=function(ctx,x,y){
            var c=document.getElementById("tutorial");
        var cxt=c.getContext("2d");    
     
               //背景色        
        cxt.fillStyle   = '#000';
        cxt.strokeStyle = '#fff';
        cxt.fillRect(0,0,1000,550);
        cxt.lineWidth  = 1;
        cxt.fill();
 
         //刷图
        var img = new Image()
        img.src = "Untitled.jpg"
        cxt.drawImage(img, 200, 0);
        
            ctx.save();
              ctx.beginPath();
              ctx.arc(this.x,this.y,this.r,0,2*Math.PI,true);
            
              if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) {
                    ctx.fillStyle = '#ff0000';
                    currentC=this;
                    this.isCurrent=true;

              }else{
                ctx.fillStyle = '#999999';
              }
               ctx.fill();
               ctx.stroke();
              
               /*ctx.beginPath();
               ctx.arc(100,100,15,0,2*Math.PI,true);
         ctx.stroke();*/
         

         ctx.beginPath();
         ctx.moveTo(100,100);
         ctx.lineTo(this.x,this.y);
         ctx.stroke();
         
         ctx.strokeText("w3school.com.cn",10,90);

    
        }
    }
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            for(var i=0;i<2;i++){
                //ctx.save();
                var c=new cricle(20*(i+1),20*(i+1),15);
                c.drawC(ctx);
                list.push(c);
                //ctx.restore();
            }
        }
    }
    
    function reDraw(e){
        e=e||event;
        var canvas = document.getElementById('tutorial');
        var x = e.clientX - canvas.offsetLeft;
        var y = e.clientY - canvas.offsetTop;

        canvas.width = canvas.width;
        if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            for(var i=0;i<list.length;i++){
                //ctx.save();
                var c=list[i];
                c.drawC(ctx,x,y);
                //ctx.restore();
            }
            
        }
    
    }
    
    function show(e){
        e=e||event;
        var canvas = document.getElementById('tutorial');
        var ctx = canvas.getContext('2d');
        var x = e.clientX - canvas.offsetLeft;
        var y = e.clientY - canvas.offsetTop;
            

        if(currentC){
            currentC.x=parseInt(x+(x-currentC.x)/5);
            currentC.y=parseInt(y+(y-currentC.y)/5);
        }
        _e=e;
        
}

    window.οnlοad=function(){
        
        var canvas = document.getElementById('tutorial');
        draw();

        canvas.οnmοusedοwn=function(e){
            e=e||event;
            var x = e.clientX - canvas.offsetLeft;
            var y = e.clientY - canvas.offsetTop;
            if(currentC)
                currentC.isCurrent=false;
            currentC=null;
            reDraw(e);
            _e=e;
              var showTimer=setInterval(function(e){
                reDraw(e);
              },10,_e);
            canvas.οnmοusemοve=show;

            document.οnmοuseup=function(){
                if(currentC)
                    currentC.isCurrent=false;
                currentC=null;
                canvas.οnmοusemοve=null;
                clearInterval(showTimer);
            }
            

        }
    }
</script>
<style type="text/css">
  canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#eeeeee ;">
    <canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
    <script>
         /*var c = document.getElementById("tutorial");
         var cxt = c.getContext("2d");
         var img = new Image()
         img.src = "Untitled.jpg"
         cxt.drawImage(img, 0, 0);*/
    </script>
    
    <br />
<br />
<br />

    <div id="xycoordinates"></div>
</body>
</html>

一顿操作猛如虎，啥也不是！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ML Visuals 11.11深度学习框架画图模板
05-10
ML Visuals 是一个在 GitHub 上广受欢迎的机器学习和深度学习领域的画图模板项目，它专为绘制神经网络和其他相关算法的图表而设计。自去年5月发布以来，这个项目已经积累了超过6.1K的Star，表明了其在科研和教育领域...
Canvas:Vs代码的最小画布
05-07
帆布 快照 安装 通过VS Code扩展进行安装。 搜索Canvas ext install dev1ce.canvas 启动新画布 推出 ： Linux Ctrl + Shift + P ⌘ + Shift + P Windows Ctrl + Shift + P 键入“ Create New Canvas或“ Canvas然后选择第一个选项。
VS Code canvas代码提示/智能提示
Singe_lq的博客
02-28 580
注意：一定要放在 var canvas = document.getElementById('c1');行的前面，否则会出现有些提示不显示的情况。VS Code不安装相关插件的情况下，使用canvas是没有代码提示的，这个时候可以添加一行注释来解决。
使用vscode写canvas代码没有提示（插件和注释）
qq_42654348的博客
10-20 1482
使用vscode写canvas代码没有提示（插件和注释）
解决 VS Code 没有 canvas 代码提示
qianduankangkang的博客
06-01 252
在获取标签上面加/**@type{HTMLCanvasElement}*/ 这一行代码就可以了 XX必须两个**
使用vscode写canvas代码没有提示如何解决
weixin_51281841的博客
08-25 1255
用vscode写canvas时发现，js代码没有提示 解决办法是在获取canvas dom对象前一行加入一串代码提示vscode接下来使用的dom对象类型，代码如下： /** @type {HTMLCanvasElement} */ 切记加在获取canvas对象的前一行！！！ ...
行业文档-设计装置-有测量和画图功能的自动铅笔.zip
08-30
标题中的“设计装置-有测量和画图功能的自动铅笔”揭示了这个文档主题是关于一种创新的设计，即一种集成了测量和画图功能的自动铅笔。这种装置可能是针对设计师、工程师或者艺术家等需要精确绘图的人群，旨在提供...
Python 基础课程《1.python 小海龟画图基础》
最新发布
05-28
主要讲解了用turtle画图 画直线、画三角形等。
小学数学画图策略和深度学习结合点探索.pdf
08-18
小学数学画图策略和深度学习结合点探索.pdf
11、学习画图--电脑基础知识.docx
09-26
在电脑基础知识的学习中，画图是一项非常有趣且实用的技能，尤其对于初学者而言。Windows操作系统内置了一个简单易用的画图程序，可以帮助用户轻松创作各种图像。下面我们将详细讲解如何启动画图程序以及如何进行...
VS Code编辑canvas绘制图形没有代码提示问题的解决
qq_34121613的博客
08-01 7964
VS Code编辑器在不安装相关插件的情况下，使用canvas绘制图形是没有代码提示的，这个时候可以添加一行注释来解决 /** @type {HTMLCanvasElement} */ var canvas = document.getElementById('tutorial'); ...
Vscode使用canvas无方法代码提示
weixin_41411644的博客
03-05 3180
简单粗暴：在代码前添加：/** @type {HTMLCanvasElement} */即可 <script> /** @type {HTMLCanvasElement} */ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d...
解决vscode使用canvas绘制图形没有代码提示问题
weixin_45955339的博客
07-15 797
vscode在没有安装插件的情况（没找到插件/(ㄒoㄒ)/~~）可以用下面的注释解决代码补全的问题 //添加下方注释提供自动补全canvas 代码 /** @type {HTMLCanvasElement} */ var canvas = document.querySelector("#canvas"); /** @type {HTMLCanvasElement} */ 开头添加这行注释可以完美解决vscode 使用canvas绘图代码不提示问题 ...
关于vscode中v-for，canvas报错的问题的解决方案
shaleilei的博客
09-28 1848
百度康乐很多，包括论坛，最后还是自己动手，最后发现是插件的一个误报，没错，插件的误报，这里面需要改一下插件的配置： 需要把vetur.validation.template这个参数改为false，这里面是不能直接改的，下面是我修改插件配置的教程： 大功告成，你再去看看你的vue中的v-for 还报错吗，觉得可以的留个言加个关注，谢谢！
VSCode canvas没有代码提示问题的解决方案
梦在前方，路在脚下，自胜者强，自强者胜！
07-08 731
方法：获取canvas元素之前添加注释，注意@之前必须是两个*否则无效 /** @type {HTMLCanvasElement} */ let canvas = document.getElementById("canvas")
在Ubuntu中用VSCode创建简单canvas示例
gc_2299的博客
10-08 563
在Ubuntu中用VSCode创建简单的html5 canvas示例
包括学习python数据可视化，jupyter notebook处理数据和画图
06-01
好的，以下是一篇关于学习Python数据可视化与Jupyter Notebook数据处理和画图的日志： 今天我学习了Python数据可视化和Jupyter Notebook数据处理和画图的方法。Python数据可视化可以帮助我们更好地理解数据，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值