Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body, canvas { width: 100%; height: 100%; overflow: hidden; }
JavaScript
const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d", { alpha: false }); const shadowCanvas = document.createElement("canvas"); const shadowContext = shadowCanvas.getContext("2d", { alpha: true }); const source = [200,200]; const points = [ [100, 100], [200, 150], [150, 200], [400, 200], [500, 300], [450, 350], [400, 250], [500, 500], [500, 550], [300, 550], [350, 500], [200, 600], [400, 650], [300, 700], [200, 750], [600, 200], [650, 150], [700, 500], [650, 550], [800, 100], [850, 100], [850, 800], [800, 800] ]; const polygons = [ [0,1,2], [3,4,5,6], [7,8,9,10], [11,12,13,14], [15,16,17,18], [19,20,21,22] ]; function update(t) { } function render(t) { context.lineWidth = 1; context.fillStyle = "white"; context.fillRect(0,0,canvas.width,canvas.height); for (let polygon of polygons) { for (let index = 0; index < polygon.length; index++) { const startPoint = polygon[index]; const endPoint = polygon[(index + 1) % polygon.length]; const start = points[startPoint]; const end = points[endPoint]; const sdx = start[0] - source[0]; const sdy = start[1] - source[1]; const sdirection = Math.atan2(sdy,sdx); const sdistance = Math.sqrt(sdx * sdx + sdy * sdy); const edx = end[0] - source[0]; const edy = end[1] - source[1]; const edirection = Math.atan2(edy,edx); const edistance = Math.sqrt(edx * edx + edy * edy); const far = Math.max(canvas.width, canvas.height); context.beginPath(); context.moveTo(start[0],start[1]); const ax = source[0] + Math.cos(sdirection) * far * far; const ay = source[1] + Math.sin(sdirection) * far * far; const bx = source[0] + Math.cos(edirection) * far * far; const by = source[1] + Math.sin(edirection) * far * far; context.lineTo(ax, ay); context.lineTo(bx, by); context.lineTo(end[0],end[1]); context.closePath(); context.strokeStyle = "black"; context.stroke(); context.fillStyle = "black"; context.fill(); } context.beginPath(); for (let index = 0; index < polygon.length; index++) { const startPoint = polygon[index]; const endPoint = polygon[(index + 1) % polygon.length]; const start = points[startPoint]; const end = points[endPoint]; context.moveTo(start[0],start[1]); context.lineTo(end[0],end[1]); } context.closePath(); context.strokeStyle = "black"; context.stroke(); context.fillStyle = "black"; context.fill(); } context.beginPath(); context.arc(source[0],source[1],5,0,Math.PI * 2); context.fillStyle = "black" context.fill(); shadowContext.clearRect(0,0,canvas.width,canvas.height); shadowContext.drawImage(canvas, 0, 0); context.fillStyle = "grey"; context.fillRect(0,0,canvas.width,canvas.height); // Draws shadow context.globalAlpha = 0.25; context.globalCompositeOperation = "multiply"; context.drawImage(shadowCanvas, 0, 0); context.globalAlpha = 1.0; context.globalCompositeOperation = "source-over"; for (let polygon of polygons) { context.beginPath(); for (let index = 0; index < polygon.length; index++) { const startPoint = polygon[index]; const endPoint = polygon[(index + 1) % polygon.length]; const start = points[startPoint]; const end = points[endPoint]; //context.moveTo(start[0],start[1]); context.lineTo(end[0],end[1]); } context.closePath(); context.lineWidth = 4; context.lineCap = "round"; context.strokeStyle = "black"; context.stroke(); // WTF! Why this does not work? context.fillStyle = "black"; context.fill(); } } let frameID; function frame(t) { update(t); render(t); frameID = requestAnimationFrame(frame); } function resize() { shadowCanvas.width = canvas.width = canvas.offsetWidth; shadowCanvas.height = canvas.height = canvas.offsetHeight; } function mouseMove(e) { source[0] = e.clientX; source[1] = e.clientY; } function start() { addEventListener("mousemove", mouseMove); addEventListener("resize", resize); dispatchEvent(new Event("resize")); frameID = requestAnimationFrame(frame); } start();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无相交阴影-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号