最近对HTML5开始感兴趣了，实现的效果如下图，大家可以从代码里换掉图片
我用的是canvas里面的2d绘图，其中上图的路径是网上在线绘制的，我太懒了，哈哈
下面是网址：
http://www.victoriakirst.com/beziertool/
专门绘制贝尔塞曲线的哦。这个工具很强大，细心的还会发现：在下面可以载入背景图，那么你就可以更加方便的绘制曲线了
大大增加了成功率哦。
下面贴代码，其实我有些地方也不太懂，关于颜色方面的什么的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#canvasPic{
overflow:hidden;
}
</style>
</head>
<body>
<canvas id="canvasPic" style="border:2px solid red;" width="700" height="500">
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvasPic");
var ctx=canvas.getContext("2d");
drawShape(ctx,0,0);
//绘制形状
function drawShape(ctx, xoff, yoff) {
ctx.beginPath();
ctx.moveTo(291 + xoff, 74 + yoff);
ctx.bezierCurveTo(281 + xoff, 62 + yoff, 122 + xoff, 138 + yoff, 132 + xoff, 256 + yoff);
ctx.bezierCurveTo(133 + xoff, 271 + yoff, 46 + xoff, 233 + yoff, 28 + xoff, 258 + yoff);
ctx.bezierCurveTo(9 + xoff, 284 + yoff, 19 + xoff, 353 + yoff, 31 + xoff, 362 + yoff);
ctx.bezierCurveTo(123 + xoff, 431 + yoff, 130 + xoff, 332 + yoff, 159 + xoff, 377 + yoff);
ctx.bezierCurveTo(167 + xoff, 390 + yoff, 120 + xoff, 470 + yoff, 194 + xoff, 480 + yoff);
ctx.bezierCurveTo(209 + xoff, 482 + yoff, 378 + xoff, 486 + yoff, 368 + xoff, 461 + yoff);
ctx.bezierCurveTo(362 + xoff, 447 + yoff, 427 + xoff, 462 + yoff, 440 + xoff, 426 + yoff);
ctx.bezierCurveTo(445 + xoff, 412 + yoff, 511 + xoff, 416 + yoff, 529 + xoff, 350 + yoff);
ctx.bezierCurveTo(550 + xoff, 273 + yoff, 543 + xoff, 157 + yoff, 537 + xoff, 121 + yoff);
ctx.bezierCurveTo(535 + xoff, 106 + yoff, 498 + xoff, 89 + yoff, 469 + xoff, 69 + yoff);
ctx.bezierCurveTo(457 + xoff, 60 + yoff, 307 + xoff, 71 + yoff, 292 + xoff, 71 + yoff);
ctx.stroke();
}
//载入图片
var img=new Image();
img.src="v.png";
img.onload=function()
{
var pattern=ctx.createPattern(img,"repeat");
//img.width='100px';
ctx.fillStyle=pattern;
ctx.fill();
ctx.globalCompositeOperation="copy";
}
//图片鼠标效果
canvas.onmouseover=function()
{
//alert('1');
ctx.shadowColor="black";
ctx.shadowBlur=20;
ctx.shadowOffsetX=6;
ctx.shadowOffsetY=6;
ctx.fill();
ctx.globalCompositeOperation="xor";
ctx.shadowColor="white";
ctx.shadowBlur=20;
ctx.shadowOffsetX=6;
ctx.shadowOffsetY=6;
ctx.fill();
}
canvas.onmouseout=function()
{
ctx.shadowColor="white";
ctx.fill();
ctx.globalCompositeOperation="lighter";
ctx.shadowColor="black";
ctx.fill();
}
</script>
</body>
</html>
__EOF__
作 者：ღKawaii
出 处：https://www.cnblogs.com/kmsfan/p/3645292.html
关于博主：一个普通的小码农，为了梦想奋斗
版权声明：署名 - 非商业性使用 - 禁止演绎，协议普通文本 | 协议法律文本。
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？