您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 图片特效 >

使用HTML5 Canvas创建Web图形特效一例

时间：2013-05-30 22:12 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
      var myImage =
new Image(); // Create a new blank image.
      function displayImage() {
Get the canvas element.
        canvas = document.getElementById("myCanvas");
        if (canvas.getContext) {
          ctx = canvas.getContext("2d");
          myImage.onload =function() {
            ctx.drawImage(myImage, 0, 0);
Get
and modify the image data.
            changeImage();
          }
          myImage.src ="jscss/demoimg/wall6.jpg";
        }
      }

function changeImage() {

ctx.strokeStyle ="white";
        ctx.lineWidth ="100";
        ctx.beginPath();
        ctx.arc(100, 100, 150, 0, Math.PI *2, true);
        ctx.closePath();
        ctx.stroke();
      }
    </script>
</head>
<body onload="displayImage()">
<h1>
American Kestral
</h1>
<img id="myPhoto" src="http://www.codesocang.com/uploads/allimg/130528/2-13052Q5564J96-lp.jpg">
<canvas id="myCanvas" width="200" height="200">
</canvas>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

本特效应用HTML5技术，因此仅支持IE9和火狐及chrome浏览器，代码中集成了5种特效，请使用火狐浏览器测试看效果，对研究HTML5技术相当有益处，不再多述，有喜欢的就拿去哦。

使用HTML5 Canvas创建Web图形特效一例由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/4918.html

标签：网站源码

上一篇：漂亮js图片切换效果

下一篇：CSS跨浏览兼容的图片透明代码

[图片特效] HTML5鼠标悬停放大图片心形图片

[图片特效] 给图片加上播放按钮

[图片特效] 带左右按钮js+css淘宝网焦点图切

[图片特效] 带小圆点的大屏焦点图轮播代码

[图片特效] 鼠标经过CSS图片边框效

[图片特效] 原生js面对对象封装版仿淘宝首页

[图片特效] CSS Filter属性特效大全

[图片特效] 一个JS横向左右切换的枫叶焦点图

[图片特效] 图片不存在的时候，显示一个默认

[图片特效] Animated CSS3 Gallery基于 CSS3

[图片特效] JS实现图片翻书效果

[图片特效] 仿新浪滑屏大图广告定时收缩为小

相关内容推荐

web前端开发

MySQL 最新版下载

信息化讲堂

网页购买按钮矢量素材

中国年PNG图标

设计工作室

ASP.NET开发教程

关于提高网站PR

浸淫专心， h

网站优化，搜索排名

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1