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实现滚动的齿轮动画效果
Jun 05 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
python 简易计算器程序,代码就几行
2009/08/29 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
numpy自动生成数组详解
2017/12/15 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
python如何求解两数的最大公约数
2018/09/27 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
python中pow函数用法及功能说明
2020/12/04 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
函授毕业自我鉴定
2013/12/19 职场文书
市场安全管理制度
2014/01/26 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
保险公司开门红口号
2014/06/21 职场文书
小学开学标语
2014/07/01 职场文书
园林技术专业求职信
2014/07/28 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python