最近对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>

用HTML5 CANVAS做自定义路径的动态效果图片！的更多相关文章

  1. 使用HTML5 canvas做地图（3）图片加载平移放大缩小

    终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...

  2. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  3. html5 canvas做的图表插件

    用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...

  4. 用HTML5 Canvas做一个画图板

    使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5: 功能很简单,原理其实和拖放是类似的,主要是 ...

  5. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  6. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

  7. HTML5 canvas中的路径方法

    路径方法 fill()                                填充当前绘图(路径) stroke()                        绘制已定义的路径 begin ...

  8. 使用HTML5 canvas做地图（1）基础知识

    之前一直想使用HTML5技术全新做一套地图API,可是苦于时间和精力,迟迟未有行动.后来下定决心,利用下班和周末做出一个大体框架出来,现在和网友分享一下自己的整体的一个思路和想法.欢迎大家提出宝贵建议 ...

  9. 使用HTML5 Canvas做些什么

    百分比圆环进度条   // ----------------------------------------------------------- 柱状排行榜统计图   // ------------ ...

随机推荐

  1. bfs判断连通图（无向）

    在图论中,连通图基于连通的概念.在一个无向图 G 中,若从顶点vi到顶点vj有路径相连(当然从vj到vi也一定有路径),则称vi和vj是连通的.如果 G 是有向图,那么连接vi和vj的路径中所有的边都 ...

  2. [收藏]C++简单五子棋

    #include<iostream> #include<iomanip> using namespace std; ; //棋盘行数 ; //棋盘列数 char p[X][Y] ...

  3. ormlite的使用方法

    ormlite是什么? 简单来说,就是我们定义一个实体类,利用这个框架,它可以帮我们吧这个实体映射到我们的数据库中,在Android中是SQLite,数据中的字段就是我们定义实体的成员变量. 官网地址 ...

  4. 打造AngularJs2.0开发环境

    angularjs2.0刚发布, typescript2.0也刚发布, 于2016.9.29记录. 参考文档:https://angular.cn/docs/ts/latest/quickstart. ...

  5. StreamingAssets文件夹在不同平台上的引用

    On a desktop computer (Mac OS or Windows) the location of the files can be obtained with the followi ...

  6. 基于Picture Library创建的图片文档库中的上传多个文件功能(upload multiple files)报错怎么解决？

    复现过程 首先,我创建了一个基于Picture Library的图片文档库,名字是 Pic Lib 创建完毕后,我点击它的Upload 下拉菜单,点击Upload Picture按钮 在弹出的对话框中 ...

  7. java异常处理

    try{}catch(){}中的代码与外部代码之间有一定的逻辑关系,需要考虑到如果抛出异常的情况下,外部代码是否可以执行. 在需要捕获异常前尽量不要代入非异常代码,捕获后相关的代码放在一起.

  8. 如何使用Microsoft技术栈

    Microsoft技术栈最近有大量的变迁,这使得开发人员和领导者都想知道他们到底应该关注哪些技术.Microsoft自己并不想从官方层面上反对Silverlight这样的技术,相对而言他们更喜欢让这种 ...

  9. Microsoft .NET Framework 4.0.3版下载

    适用于 Microsoft .NET Framework 4 的更新 4.0.3,其中包含一系列新增功能,用于满足高端客户的功能需求和重要 .NET Framework 方案的需求. http://w ...

  10. 浅析UPnP协议

    摘要:文章介绍了UPnP结构规范和开发流程,指出:UP nP协议使所有联网的设备实现互联,设备工作不需要传统的驱动程序,便可以实现设备间的 相互控制. 关键词:UPnP协议:开发流程:电子技术:工作 ...