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 相关文章推荐
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
html form表单基础入门案例讲解
Jul 21 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获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python过滤列表用法实例分析
2016/04/29 Python
python中import reload __import__的区别详解
2017/10/16 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
使用python实现多维数据降维操作
2020/02/24 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
python实现微信打飞机游戏
2020/03/24 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
幼儿园辞职信
2015/05/13 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
详解python的内存分配机制
2021/05/10 Python
Python 正则模块详情
2021/11/02 Python