做了一个鼠标滑过框自动绘制六边形：
代码案例：
 

<!DOCTYPE html>
<html><head>
<  http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">
	< >canvas</ >
</head>
<body>
<canvas id=\"canvas\" class=\"canvas\" width=\"132\" height=\"156\" style=\"border:1px solid #000;\"></canvas>
<canvas id=\"canvas2\" class=\"canvas\" width=\"132\" height=\"156\" style=\"border:1px solid #000;\"></canvas>

<  type=\"text/ \">
var canvas = document.getElementsByTagName(\"canvas\")[0];
var context = canvas.getContext(\"2d\");

var canvas2 = document.getElementsByTagName(\"canvas\")[1];
var context2 = canvas2.getContext(\"2d\");


var offset;
var flag = true;

var offset2;
var flag2 = true;

function animate() {
    var myAnimation = requestAnimation (animate);

    offset += (flag === true) ? 10 : -10;

    if (offset >= 0) {
        offset = 0;
    }
    if (offset <= -600) {
        offset = -600
        cancelAnimation (myAnimation);
    }

    canvas.height = 156;

    context.strokeStyle = \"#000\";
	<!-- 最低 -->
    context.moveTo(66, 156);
    context.lineTo(132, 104);
    context.lineTo(132, 52);
	<!-- 最上 -->
    context.lineTo(66, 0);
    context.lineTo(0, 52);
    context.lineTo(0, 104);
    context.closePath();
    context.setLineDash([600, 600]);
    context.lineDashOffset = -offset;
    context.stroke();
}
function animate2() {
    var myAnimation2 = requestAnimation (animate2);

    offset2 += (flag2 === true) ? 10 : -10;

    if (offset2 >= 0) {
        offset2 = 0;
    }
    if (offset2 <= -600) {
        offset2 = -600
        cancelAnimation (myAnimation2);
    }

    canvas2.height = 156;

    context2.strokeStyle = \"#000\";
	<!-- 最低 -->
    context2.moveTo(66, 156);
    context2.lineTo(132, 104);
    context2.lineTo(132, 52);
	<!-- 最上 -->
    context2.lineTo(66, 0);
    context2.lineTo(0, 52);
    context2.lineTo(0, 104);
    context2.closePath();
    context2.setLineDash([600, 600]);
    context2.lineDashOffset = -offset2;
    context2.stroke();
}
canvas.addEventListener(\'mouseenter\', function() {
    offset = -600;
    flag = true
    animate();
})

canvas.addEventListener(\'mouseleave\', function() {
    flag = false;

})
canvas2.addEventListener(\'mouseenter\', function() {
    offset2 = -600;
    flag2 = true
    animate2();
})
canvas2.addEventListener(\'mouseleave\', function() {
    flag2 = false;

})
</ >
</body></html>

效果展示：
\"\"

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月14日 星期四

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章