最近对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. Jtable 表格按多列排序（支持中文汉字排序）

    这两天公司让做一个Jtable表格的排序,首先按A列排序,在A列相等时按B列排序,B列相等时按C列排序,ABC三列可以任意指定,最多分三列,这样的一个需求.由于我是大神,所以必须做了出来.ok,不自恋 ...

  2. Java程序开发.邱加永2.1节

    by2016.9.8 2.7.1 一维数组 1. 声明 int[] m: char[] c: double[] d:   2. 创建 数组声明之后还不能使用,m = new int[10]: c = ...

  3. serialVersionUID， ObjectInputStream与ObjectOutputStream类，Serializable接口，serialVersionUID的作用和用法

    ObjectInputStream与ObjectOutputStream类所读写的对象必须实现Serializable接口,对象中的transient和static类型成员变量不会被读取和写入 Ser ...

  4. linux内核分析作业8：理解进程调度时机跟踪分析进程调度与进程切换的过程

    1. 实验目的 选择一个系统调用(13号系统调用time除外),系统调用列表,使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 分析汇编代码调用系统调用的工作过程,特别是参数的传递的方 ...

  5. 生成Json文件

  6. 非常郁闷的 .NET中程序集的动态加载

    记载这篇文章的原因是我自己遇到了动态加载程序集的问题,而困扰了一天之久. 最终看到了这篇博客:http://www.cnblogs.com/brucebi/archive/2013/05/22/Ass ...

  7. C# Random生成多个不重复的随机数万能接口

    C#,Radom.Next()提供了在一定范围生成一个随机数的方法,我现在有个业务场景是给其他部门推送一些数据供他们做抽样检查处理,假设我的数据库里面有N条数据,现在要定期给其随机推送数据,我需要先拿 ...

  8. 编译Android AOSP代码

    下载完了源代码,终于到了编译的阶段了.这个阶段远比你想象的简单,一个make命令就可以完成源代码的编译了.参照下面的教程你就可以编译出适用于Android源代码树上的所有分支,包括master.基本的 ...

  9. Windows Azure Storage (17) Azure Storage读取访问地域冗余(Read Access – Geo Redundant Storage, RA-GRS)

    <Windows Azure Platform 系列文章目录> 细心的用户会发现,微软在国外和国内的数据中心建设都是成对的,比如香港数据中心(Asia East)和新加坡的数据中心(Sou ...

  10. 混合 Data Warehouse 和 Big Data 倉庫的新架構

    (讀書筆記)許多公司,儘管想導入 Big Data,仍必須繼續用 Data Warehouse 來管理結構化的營運數據.系統記錄.而 Big Data 的出現,為 Data Warehouse 提供了 ...