HTML5在canvas中绘制复杂形状附效果截图


Posted in HTML / CSS onJune 23, 2014

一、绘制复杂形状或路径

在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径。

beginPath() : 开始绘制一个新路径。
closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状。
fill() , stroke() : 填充形状或绘制空心形状。
moveTo() : 将当前点移动到点(x,y)。
lineTo() : 从当前点绘制一条直线到点(x,y)。
arc(x,y,r,sAngle,eAngle,counterclockwise) : 绘制一条指定半径的弧到点(x,y)。

二、用这些方法绘制复杂形状需遵循以下步骤

使用beginPath()方法开始绘制路径。
使用moveTo()、lineTo()、arc()、方法创建线段。
使用closePath()结束绘制并闭合形状(可选)。
使用stroke()或fill()绘制路径的外边框或填充形状。使用fill()会自动闭合所有未闭合路径。

三、弧arc()绘制说明
HTML5在canvas中绘制复杂形状附效果截图 
HTML5在canvas中绘制复杂形状附效果截图 
四、在canvas中绘制复杂形状

复制代码
代码如下:

<!--<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
<title>HTML5</title>
<script type="text/javascript" charset = "utf-8">
//这个函数将在页面完全加载后调用
function pageLoaded()
{
//获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同
var canvas = document.getElementById('tCanvas');
//获取该canvas的2D绘图环境
var context = canvas.getContext('2d');
//绘制代码将出现在这里
//绘制复杂性猪
//填充三角形
context.beginPath();
context.moveTo(10,120);//从(10,20开始)
context.lineTo(10,180);//表示从(10,120)开始,画到(10,180)结束
context.lineTo(110,150);//表示从(10,180)开始,画到(110,150)结束
context.fill();//闭合形状并且以填充方式绘制出来
//三角形的外边框
context.beginPath();
context.moveTo(140,160);//从点(140,160)开始
context.lineTo(140,220);
context.lineTo(40,190);
context.closePath(); //关闭路径
context.stroke(); //以空心填充
//一个复杂的多边形
context.beginPath();
context.moveTo(160,160);//从点(160,160)开始
context.lineTo(170,220);
context.lineTo(240,210);
context.lineTo(260,170);
context.lineTo(190,140);
context.closePath();
context.stroke();
//绘制弧
//绘制半圆弧
context.beginPath();
//在(100,300)处逆时针画一个半径为40,角度从0到180°的弧线
context.arc(100,300,40,0*Math.PI,1*Math.PI,true); //PI的弧度是180°
context.stroke();
//画一个实心圆
context.beginPath();
//在(100,300)处逆时针画一个半径为30,角度为0到360°的弧
context.arc(100,300,30,0*Math.PI,2*Math.PI,true);//2*Math.PI是360°
context.fill();
//画一个3/4弧
context.beginPath();
//在(200,300)处顺时针画一个半径为25,角度为0到270°的弧
context.arc(200,300,25,0*Math.PI,3/2*Math.PI,false);
context.stroke();
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width = "400" height = "400" id = "tCanvas" style = "border:black 1px solid;">
<!--如果浏览器不支持则显示如下字体-->
提示:你的浏览器不支持<canvas>标签
</canvas>
</body>
</html>

五、绘制效果
HTML5在canvas中绘制复杂形状附效果截图
HTML / CSS 相关文章推荐
css3实现3D色子翻转特效
Dec 23 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
CSS的calc函数用法小结
Jun 25 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 #HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 #HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 #HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 #HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 #HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 #HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 #HTML / CSS
You might like
业余方法DIY电子管FM收音机
2021/03/02 无线电
3种平台下安装php4经验点滴
2006/10/09 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
javascript回调函数详解
2018/02/06 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
前端深入理解Typescript泛型概念
2020/03/09 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python实现多线程端口扫描
2019/08/31 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
python中time、datetime模块的使用
2020/12/14 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
后勤人员自我鉴定
2013/10/20 职场文书
红色故事演讲稿
2014/05/22 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书