在canvas中怎么把最后画的一个方形放在所有图形的最后方

RichFlynn 2017-01-26 07:26:24 


<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<title>Gridlab-d PowerFlow Simulator</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

	<style>

	span{

		cursor:pointer;

        color: #dffaff;

        font-style: oblique;

	}

        button{

            font-size: large;

            font-style: oblique;

        }

	</style>

</head>

<body style="background: #dee0f1">

    <div class = "col-md-5 col-md-offset-5" id="header">

        <h1 style="color: #6d81b6"> power flow</h1>

    </div>

    <button id = "btn"type="button" class="btn btn-primary btn-lg btn-block">Run</button>

    <canvas  id = "myCanvas" class="myCanvas" width="1270" height="600" style="border:1px solid #767784; " >

		<input type="text">

	</canvas>





</body>

</html>

<script>

    var c=document.getElementById("myCanvas");

    var cxt=c.getContext("2d");

    var button = document.getElementById('btn');



//    var gen = new Image();   // 创建一个img元素

//    gen.src = './images/generator.png'; // 设置图片源地址

//    cxt.globalCompositeOperation='destination-over';

//    cxt.beginPath();

//    gen.onload = function () {//将图片放入canvas

//        cxt.drawImage(gen,100-75,300-75);

//    }

//

//    var bus = new Image();   // 创建一个img元素

//    bus.src = './images/bus.png'; // 设置图片源地址

//    cxt.globalCompositeOperation='destination-over';

//    cxt.beginPath();

//    bus.onload = function () {//将图片放入canvas

//        cxt.drawImage(bus,100-75+150,300-75);

//        cxt.drawImage(bus,100-75+150*3,300-75);

//        cxt.drawImage(bus,100-75+150*5,300-75);

//    }

//

//    var line = new Image();   // 创建一个img元素

//    line.src = './images/line.png'; // 设置图片源地址

//    cxt.globalCompositeOperation='destination-over';

//    cxt.beginPath();

//    line.onload = function () {//将图片放入canvas

//        cxt.drawImage(line,100-75+150*2,300-75);

//    }

//

//    var tran = new Image();   // 创建一个img元素

//    tran.src = './images/transformer.png'; // 设置图片源地址

//    cxt.globalCompositeOperation='destination-over';

//    cxt.beginPath();

//    tran.onload = function () {//将图片放入canvas

//        cxt.drawImage(tran,100-75+150*4,300-75);

//    }

//

//    var load = new Image();   // 创建一个img元素

//    load.src = './images/load.png'; // 设置图片源地址

//    cxt.globalCompositeOperation='destination-over';

//    cxt.beginPath();

//    load.onload = function () {//将图片放入canvas

//        cxt.drawImage(load,50-25+150*6,300-25);

//    }



    button.onclick=function fillC(){



        var gen = new Image();   // 创建一个img元素

        gen.src = './images/generator.png'; // 设置图片源地址

        cxt.globalCompositeOperation='destination-over';

        cxt.beginPath();

        gen.onload = function () {//将图片放入canvas

            cxt.drawImage(gen,100-75,300-75);

        }



        var bus = new Image();   // 创建一个img元素

        bus.src = './images/bus.png'; // 设置图片源地址

        cxt.globalCompositeOperation='destination-over';

        cxt.beginPath();

        bus.onload = function () {//将图片放入canvas

            cxt.drawImage(bus,100-75+150,300-75);

            cxt.drawImage(bus,100-75+150*3,300-75);

            cxt.drawImage(bus,100-75+150*5,300-75);

        }



        var line = new Image();   // 创建一个img元素

        line.src = './images/line.png'; // 设置图片源地址

        cxt.globalCompositeOperation='destination-over';

        cxt.beginPath();

        line.onload = function () {//将图片放入canvas

            cxt.drawImage(line,100-75+150*2,300-75);

        }



        var tran = new Image();   // 创建一个img元素

        tran.src = './images/transformer.png'; // 设置图片源地址

        cxt.globalCompositeOperation='destination-over';

        cxt.beginPath();

        tran.onload = function () {//将图片放入canvas

            cxt.drawImage(tran,100-75+150*4,300-75);

        }



        var load = new Image();   // 创建一个img元素

        load.src = './images/load.png'; // 设置图片源地址

        cxt.globalCompositeOperation='destination-over';

        cxt.beginPath();

        load.onload = function () {//将图片放入canvas

            cxt.drawImage(load,50-25+150*6,300-25);

        }

        gradient(100+150,300);

        gradient(100+150*3,300);

        gradient(100+150*5,300);

        cxt.globalCompositeOperation='destination-over';

        cxt.fillStyle  = 'rgba(0,255,0,0.5)';

        cxt.fillRect(0,0,1270,600);/*绘制一个矩形，前两个参数决定开始位置，后两个分别是矩形的宽和高*/



    }





    function gradient(x,y){



		var cInput = document.createElement('input');

		var cP = document.createElement('span');

		var body = document.getElementsByTagName('body')[0];





        body.appendChild(cInput);

		body.appendChild(cP);

		cP.innerHTML = 'RUN';



		cInput.style.position="absolute";

		cInput.style.width=50+'px';

		cInput.style.left = x+'px';

		cInput.style.top = y-20-50+'px';



		cP.style.position="absolute";

		cP.style.width=50+'px';

		cP.style.left = x+60+'px';

		cP.style.top = y-20-50+'px';



		cxt.beginPath();

        cxt.fillStyle= 'rgba(0,255,0,0)';

        //画圆

        cxt.arc(x,y,200,0,Math.PI*2,true);

        cxt.fill();

//			//闭合路径

        cxt.closePath();





        var inside = '';

		cP.onclick = function(){

            inside = cInput.value;

			//颜色环



			var colorOne = '';

			var colorTwo = '';

			var colorThree = '';

			var colorFour = '';



			if(inside<=0.95){

				colorOne = '#ff0000';

				colorTwo = '#ffaa00';

				colorThree = '#ffff00';

				colorFour = '#aaff00';

			}



			if(0.95<inside && inside<0.97){

				colorOne = '#ffaa00';

				colorTwo = '#ffff00';

				colorThree = '#aaff00';

				colorFour = '#00ff00';

			}



			if(0.97<=inside && inside<0.99){

				colorOne = '#ffff00';

				colorTwo = '#aaff00';

				colorThree = '#00ff00';

				colorFour = '#00ff00';

			}



			if(0.99<=inside && inside<=1.01){

				colorOne = '#00ff00';

				colorTwo = '#00ff00';

				colorThree = '#00ff00';

				colorFour = '#00ff00';

			}



			if(1.01<inside && inside<=1.03){

				colorOne = '#00ffff';

				colorTwo = '#00ffaa';

				colorThree = '#00ff00';

				colorFour = '#00ff00';

			}



			if(1.03<inside && inside<1.05){

				colorOne = '#00aaff';

				colorTwo = '#00ffff';

				colorThree = '#00ffaa';

				colorFour = '#00ff00';

			}



			if(inside>=1.05){

				colorOne = '#0000ff';

				colorTwo = '#00aaff';

				colorThree = '#00ffff';

				colorFour = '#00ffaa';

			}



			var grd=cxt.createRadialGradient(x,y,60,x,y,150);



			grd.addColorStop(0,colorOne);

			grd.addColorStop(0.3,colorTwo);

			grd.addColorStop(0.6,colorThree);

			grd.addColorStop(0.9,colorFour);

			grd.addColorStop(1,'#00ff00');

            //开启路径

			cxt.beginPath();

            cxt.fillStyle=grd;

			//画圆



            cxt.arc(x,y,200,0,Math.PI*2,true);

            cxt.fill();

//			//闭合路径

			cxt.closePath();

		}

	}









//        gradient(100+150,300);

//        gradient(100+150*3,300);

//        gradient(100+150*5,300);







</script>
...全文
244 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
RichFlynn 2017-01-26
  • 打赏
  • 举报
 回复
引用 4 楼 jslang 的回复:
你要记住用canvas做应用或动画时，要改变画布的内容，一般都是需要先清除画面，再去重新绘制新的画面。 重新绘制时一定按你需求的层叠顺序重绘。也就是说先绘制最下层的图形，最后绘制最上层的图形。
好的好的，我现在就接着试。
天际的海浪 2017-01-26
  • 打赏
  • 举报
 回复
你要记住用canvas做应用或动画时，要改变画布的内容，一般都是需要先清除画面，再去重新绘制新的画面。 重新绘制时一定按你需求的层叠顺序重绘。也就是说先绘制最下层的图形，最后绘制最上层的图形。
RichFlynn 2017-01-26
  • 打赏
  • 举报
 回复
引用 2 楼 jslang 的回复:
点击button 之后清除整个画布，按图形的层叠顺序重新绘制所有图形
对不起大神没说清楚需求。 现在的需求是点击 button run 时， 出现绿色方块，以及 三个输入框，然后在各自点击输入框出现渐变，这个渐变是在图片之下，绿色方块之上。。。。 所以我试了清楚画布 好像并没有什么改变。。。。
天际的海浪 2017-01-26
  • 打赏
  • 举报
 回复
点击button 之后清除整个画布，按图形的层叠顺序重新绘制所有图形
RichFlynn 2017-01-26
  • 打赏
  • 举报
 回复
问题补充 ： 上图代码中，我试图将绿色的rec 成为canvs 的最底层，然后上层为渐变圆，再上层为 图片，但是这个最底层的 绿色方块 必须在我点击button 之后才可出现，而渐变则是点击span 之后才会出现。 也就是说， 整个网页，点击run，出现 图片和绿色方形，此时图片在上，绿色方形在下， 而当点击 span 后，在图片下，绿色方形上，出现渐变圆。 但现在绿色方形一只在渐变圆之上，或者在图片和渐变圆之上。 求大神解救啊～～～
wpf_绘画圆形.zip
实现了在画布上绘画三角形，正方形，直线，五角星，等形状的图形，代码简洁易懂，使用方便，使用Canvas画布。
c# 俄罗斯方块游戏
用C# 写的俄罗斯方块游戏，代码贴出来大家一起交流，谢谢
android 立方体旋转效果
自己做的一个android 立方体的旋转效果，调用android.graphic.camera类，rotate的方法
用python的turtle画正方形内切圆_Python 用turtle实现用正方形画圆的例子
最近发现一个很有意思的画图的python库，叫做turtle，这里先说下用turtle这个库来实现用正方形画圆的思路。每次都用乌龟（turtle）来画出一个正方形，然后通过旋转3°后，继续画一样的正方形，在通过120次循环后就实现了完整的圆，这里当然也可以用其他的角度和次数，只要能完成360度就可以了。先看完成的图形和代码。代码如下：import turtlewindow = turtle.Scr...
用python的turtle画正方形内切圆_用turtle实现用正方形画圆
最近发现一个很有意思的画图的python库，叫做turtle，这里先说下用turtle这个库来实现用正方形画圆的思路。每次都用乌龟（turtle）来画出一个正方形，然后通过旋转3°后，继续画一样的正方形，在通过120次循环后就实现了完整的圆，这里当然也可以用其他的角度和次数，只要能完成360度就可以了。先看完成的图形和代码。代码如下：import turtlewindow = turtle.Scr...
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章