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动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
纯html+css实现Element loading效果
Aug 02 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
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
动态加载js的几种方法
2006/10/23 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python使用cPickle模块序列化实例
2014/09/25 Python
python爬虫的工作原理
2017/03/05 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python实现操作文件(文件夹)
2019/10/31 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
挂职思想汇报
2013/12/31 职场文书
大型活动策划方案
2014/01/12 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
宿舍标语大全
2014/06/19 职场文书
活动费用申请报告
2015/05/15 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python