极客观点
项目管理
HarmonyOS
，小的canvas
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx.cs" Inherits="WebApplication1.WebForm12" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml&...
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery.js"></script></head>
<body>
<canvas id="c1"class="can"width="100" height="100" draggable="true"ondragstart="drag(event)"style=" position:absolute;margin-top:0"></canvas>
<canvas id="c2"class="can"width="100" height="100" draggable="true"ondragstart="drag(event)"style=" position:absolute;margin-top:102px"></canvas>
<canvas id="c3"class="can"width="100" height="100" draggable="true"ondragstart="drag(event)"style=" position:absolute;margin-top:204px"></canvas>
<canvas id="c4"class="can"width="100" height="100" draggable="true" ondragstart="drag(event)"style=" position:absolute;margin-top:308px"></canvas>
<canvas id="c5"class="can"width="100" height="100" draggable="true"ondragstart="drag(event)"style=" position:absolute;margin-top:410px"></canvas>
<canvas id="c6"class="can"width="100" height="100" draggable="true" ondragstart="drag(event)"style=" position:absolute;margin-top:512px"></canvas>
<canvas id="c8"width="100" height="100" hidden="hidden" style=" position:absolute"></canvas>
<canvas id="c9"width="100" height="100" hidden="hidden"style="position:absolute"></canvas>
<canvas id="cc" width="400" height="700"ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid red;margin-left:150px;"></canvas>
<script>
var a = document.getElementById("c1");
var aa = a.getContext("2d");
aa.rect(25, 25, 50, 50);
aa.moveTo(50, 25);//上
aa.lineTo(50, 0);
aa.moveTo(25, 50);//左
aa.lineTo(0, 50);
aa.moveTo(50, 100);//下
aa.lineTo(50, 75);
aa.moveTo(75, 50);//右
aa.lineTo(100, 50);
aa.stroke();
var b = document.getElementById("c2");
var bb = b.getContext("2d");
bb.fillStyle = "red";
bb.rect(25, 25, 50, 50);
bb.moveTo(50, 25);//上
bb.lineTo(50, 0);
bb.moveTo(25, 50);//左
bb.lineTo(0, 50);
bb.moveTo(50, 100);//下
bb.lineTo(50, 75);
bb.moveTo(75, 50);//右
bb.lineTo(100, 50);
bb.stroke();
var c = document.getElementById("c3");
var cc = c.getContext("2d");
cc.fillStyle = "red";
cc.rect(25, 25, 50, 50);
cc.moveTo(50, 25);//上
cc.lineTo(50, 0);
cc.moveTo(25, 50);//左
cc.lineTo(0, 50);
cc.moveTo(50, 100);//下
cc.lineTo(50, 75);
cc.moveTo(75, 50);//右
cc.lineTo(100, 50);
cc.stroke();
var d = document.getElementById("c4");
var dd = d.getContext("2d");
dd.fillStyle = "red";
dd.rect(25, 25, 50, 50);
dd.moveTo(50, 25);//上
dd.lineTo(50, 0);
dd.moveTo(25, 50);//左
dd.lineTo(0, 50);
dd.moveTo(50, 100);//下
dd.lineTo(50, 75);
dd.moveTo(75, 50);//右
dd.lineTo(100, 50);
dd.stroke();
var e = document.getElementById("c5");
var ee = e.getContext("2d");
ee.fillStyle = "red";
ee.rect(25, 25, 50, 50);
ee.moveTo(50, 25);//上
ee.lineTo(50, 0);
ee.moveTo(25, 50);//左
ee.lineTo(0, 50);
ee.moveTo(50, 100);//下
ee.lineTo(50, 75);
ee.moveTo(75, 50);//右
ee.lineTo(100, 50);
ee.stroke();
var f = document.getElementById("c6");
var ff = f.getContext("2d");
ff.fillStyle = "red";
ff.rect(25, 25, 50, 50);
ff.moveTo(50, 25);//上
ff.lineTo(50, 0);
ff.moveTo(25, 50);//左
ff.lineTo(0, 50);
ff.moveTo(50, 100);//下
ff.lineTo(50, 75);
ff.moveTo(75, 50);//右
ff.lineTo(100, 50);
ff.stroke();
var h = document.getElementById("c8");//竖线
var hh = h.getContext("2d");
hh.moveTo(50,0);
hh.lineTo(50,100);
hh.stroke();
var i = document.getElementById("c9");//横线
var ii = i.getContext("2d");
ii.moveTo(0,50);
ii.lineTo(100,50);
ii.stroke();
var g = document.getElementById("cc");
var gg = g.getContext("2d");
$(document).ready(function () {
for (var k = 0; k < 6; k++) {
$("#c"+(k+1)).mouseenter(function () {
$(this).css("border", "0.5px dashed #70C0E7");
});
$("#c" +(k+ 1)).mouseleave(function () {
$(this).css("border", "");
});
}
$(function () {
$(".can").click(function () {
$(this).css("background", "#70C0E7").siblings().css("background", "");
});
})
});
gg.drawImage(a, 0, 0);
gg.drawImage(b, 0, 100);
gg.drawImage(c, 0, 200);
gg.drawImage(d, 0, 300);
gg.drawImage(f, 0, 500);
gg.drawImage(f, 200, 500);
gg.drawImage(h, 0, 400);
gg.drawImage(i, 100, 500);
</script>
</body>
</html>
html5