HTML5 Canvas锯齿图代码实例


Posted in HTML / CSS onApril 10, 2014

效果图:HTML5 Canvas锯齿图代码实例

提示:把代码复制到一个html文件中并保存,直接打开即可看到效果。

实现代码:

复制代码
代码如下:
<!doctype html>
<html lang="zh">
<head>
<meta charset="gbk">
<title>锯齿图</title>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
var x,y;
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");

//Box
context.strokeStyle = '#00f';
context.lineWidth=10;
context.strokeRect(0, 0, theCanvas.width-0, theCanvas.height-0);
context.fillStyle = "#00f";
for(x=5;x<=canvas.width;x=x+10){
context.beginPath();
context.arc(x,5,5,0,Math.PI,false);
context.closePath();
context.fill();
context.beginPath();
context.arc(x,canvas.height-5,5,0,Math.PI,true);
context.closePath();
context.fill();
}
for(y=5;y<=canvas.height;y=y+10){
context.beginPath();
context.arc(5,y,5,0,Math.PI*2,true);
context.arc(canvas.width-5,y,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 100px; left: 100px;">
<canvas id="canvas" width="300" height="300">
</div>
</body>
</html>

HTML / CSS 相关文章推荐
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 #HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 #HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 #HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 #HTML / CSS
为你的html5网页添加音效示例
Apr 03 #HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 #HTML / CSS
简单html5代码获取地理位置
Mar 31 #HTML / CSS
You might like
如何在PHP程序中防止盗链
2008/04/09 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python使用PyGame模块播放声音的方法
2015/05/20 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
django实现用户登陆功能详解
2017/12/11 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python实现动态循环输出文字功能
2020/05/07 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
Mysql数据库命令大全
2021/05/26 MySQL