canvas 例子

最新推荐文章于 2025-09-09 08:37:13 发布

转载最新推荐文章于 2025-09-09 08:37:13 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shaozhu520/p/8698714.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Trianglify.js库实现在HTML Canvas上绘制动态背景的例子。通过设置画布尺寸和颜色方案，创建了带有PuOr色调的三角形图案背景，并在页面中实现了文字与动态背景的良好融合。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>canvas_demo</title>
<meta name="Keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<link href="http://demo.z01.com/dist/css/bootstrap4.min.css" rel="stylesheet"/>
<link href="http://demo.z01.com/dist/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://demo.z01.com/JS/jquery.min.js" ></script>
<script src="http://demo.z01.com/dist/js/popper.min.js"></script>
<script src="http://demo.z01.com/dist/js/bootstrap4.min.js"></script>
<script src="http://demo.z01.com/dist/js/trianglify.min.js"></script>
</head>
<body>
<style>
#my_canvas h1 {
    position: absolute;
    left: 20%;
    bottom: 4rem;
    font-size: 2rem;
    font-weight: 100;
    color: #fff;
    z-index: 1;
}
#my_canvas {
    position: relative;
    height: 62vh;
    overflow: hidden;
}
</style>


<div id="my_canvas">
<h1>canvas 文字测试</h1>
</div>


<script>

//智能背景画布
var pattern = Trianglify({
	width: window.innerWidth,
	height:1980,
	x_colors: "PuOr"
});
var canvas = pattern.svg();
canvas.style.position = "absolute";
canvas.style.top = 0;
canvas.style.left = 0;
//canvas.style.height = 760;


document.getElementById("my_canvas").appendChild(canvas);
//主要依赖 http://demo.z01.com/dist/js/trianglify.min.js
//
//颜色列表
//Greens
//GnBu
//PuBuGn
//BuPu
//PuRd
//Reds
//PuOr
//BrBG
//PRGn
//PiYG
//RdBu
//RdGy
//RdYlBu
//Spectral
//RdYlGn
//
//
//
//
//
//
//
//
</script>
</body>
</html>

转载于:https://www.cnblogs.com/shaozhu520/p/8698714.html