html5的画布canvas——画出弧线、旋转的图形实例代码+效果图


Posted in HTML / CSS onJune 09, 2013

在做旋转操作之前一定要理解一句话:旋转的是画布的坐标系而不是图形本身,好了,理解了这一句话后,接下来的就很简单了。
首先认识一下画圆的坐标:
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图 

复制代码
代码如下:

<script language="javascript">
var cxt=document.getElementById('demo').getContext("2d");
cxt.beginPath();
cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,false);/*绘制一段半圆弧线,圆心坐标是100,100;开始弧度是0.75,结束弧度是1.75,最后一个参数False = 顺时针,true = 逆时针,当然,这个参数可选的*/
cxt.fillStyle="#F00";/*选择使用的颜色*/
cxt.fill();/*真正将图形画在画布上的一步,画第一个半圆*/
/*同理绘制第二个半圆*/
cxt.beginPath();
cxt.arc(170,100,50,Math.PI*1.25,Math.PI*0.25,false);
cxt.fillStyle="#F00";
cxt.fill();/*将绘制的图形画在画布上*/
cxt.beginPath();
/*将画布顺时针旋转45度,rotate函数的参数是弧度,所以要进行转换*/
cxt.rotate(45*Math.PI/180);
cxt.fillRect(141.1,-50,100,100);/*开始坐标为141.1,-50,宽和高都是100*/
cxt.fillStyle="#F00";
cxt.fill();
cxt.beginPath();
/*将画布旋转到正常的角度*/
cxt.rotate(-45*Math.PI/180);
cxt.font="60px 微软雅黑";
cxt.strokeStyle="#f00";
cxt.strokeText("我爱html5",0,300);/*两个参数,第一个是开始绘制文本的x轴坐标,第二个是开始绘制文本的Y坐标*/
cxt.stroke();
/*创建渐变*/
var grd=cxt.createLinearGradient(0,45,175,50);/*四个参数分别是渐变开始点x、y渐变结束点x、y*/
grd.addColorStop(0,"#FF0000");
grd.addColorStop(0.25,"#FFFF00");
grd.addColorStop(0.5,"#00FF00");
grd.addColorStop(0.75,"#00FFFF");
grd.addColorStop(1,"#FFFF00");
cxt.strokeStyle=grd;
cxt.strokeText("我爱canvas",0,400);/*两个参数,第一个是开始绘制文本的x轴坐标,第二个是开始绘制文本的Y坐标*/
cxt.stroke();
</script>

效果图:
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
HTML / CSS 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 #HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 #HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 #HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 #HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 #HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 #HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 #HTML / CSS
You might like
简单的PHP图片上传程序
2008/03/27 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
js计数器代码
2006/11/04 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
关于期中考试的反思
2014/02/02 职场文书
2014年销售员工作总结
2014/12/01 职场文书
谢师宴学生致辞
2015/07/27 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS