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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
浅析HTML5 Landmark
Sep 11 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
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
Python工程师面试必备25条知识点
2018/01/17 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
python 日期排序的实例代码
2019/07/11 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
上课睡觉检讨书
2014/01/28 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
爱护公物标语
2014/06/24 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
毕业典礼邀请函
2015/01/31 职场文书
大学生求职信怎么写
2015/03/19 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
员工离职证明范本
2015/06/12 职场文书
关于远足的感想
2015/08/10 职场文书
会计岗位工作总结
2015/08/12 职场文书
Go并发4种方法简明讲解
2022/04/06 Golang