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 相关文章推荐
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 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 class类的用法详细总结
2013/10/17 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
jquery中动态效果小结
2010/12/16 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python3获取url文件大小示例代码
2019/09/18 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS