[html] 学习笔记-Canvas使用路径
想要绘制其他图形,需要使用路径,使用路径包含4个步骤,开始创建路径、创建图形的路径、路径创建完成后关闭路径、设定绘制样式,之后就可以调用绘制方法绘制路径了。
1、绘制圆形
<!DOCTYPE html> <html> <head> <title></title> <script> function draw(id){ var canvas = document.getElementById("canvas"); if(canvas == null){ return false; } var context = canvas.getContext("2d"); context.fillStyle="#eeeeef"; context.fillRect(0,0,600,700); for(var i=0; i<=10;i++){ context.beginPath(); context.arc(i*25,i*25,i*10,0,Math.PI*2,true); context.closePath(); context.fillStyle = "rgba(255,0,0,0.25)"; context.fill(); } } </script> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="600px" height="700px"></canvas> </body> </html>
2、moveTo与lineTo
moveTo:将光标移动到指定坐标点
lineTo:指定直线的终点
<!DOCTYPE html> <html> <head> <title></title> <script> function draw(id) { var canvas=document.getElementById(id); var context = canvas.getContext("2d"); context.fillStyle = "#eeeeef"; context.fillRect(0,0,300,400); var dx = 150; var dy = 150; var s = 100; context.beginPath(); context.fillStyle = "rgb(100,255,100)"; context.strokeStyle = "rgb(0,0,100)"; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 *11; for(var i=0; i<30;i++){ var x = Math.sin(i*dig); var y = Math.cos(i*dig); context.lineTo(dx+x*s, dy+y*s); } context.closePath(); context.fill(); context.stroke(); } </script> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="300" height="400"></canvas> </body> </html>
3、使用bezierCurveTo绘制贝塞尔曲线
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function draw(id){ var canvas = document.getElementById(id); if(canvas==null){ return false; } var context = canvas.getContext("2d"); context.fillStyle = "#eeeeef"; context.fillRect(0,0,300,400); var dx = 150; var dy = 150; var s = 100; context.beginPath(); context.fillStyle = "rgb(100,255,100)"; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI /15 *11; context.moveTo(dx,dy); for(var i=0;i<30;i++){ var x = Math.sin(i*dig); var y = Math.cos(i*dig); context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s); } context.closePath(); context.fill(); context.stroke(); } </script> </head> <body onload="draw('canvas')"> <!--bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)--> <!--cp1x,cp1y 第一个控制点的坐标--> <!--cp2x,cp2y,第二个控制点的坐标--> <!--x,y:相当于lineTo的x,y--> <canvas id="canvas" width="300px" height="400px"></canvas> </body> </html>
[html] 学习笔记-Canvas使用路径的更多相关文章
- V-rep学习笔记:机器人路径规划2
路径规划问题是机器人学研究的一个重要领域,它是指给定操作环境以及起始和目标的位置姿态,要求选择一条从起始点到目标点的路径,使运动物体(移动机器人或机械臂)能安全.无碰撞地通过所有的障碍物而达到目标位置 ...
- [html5] 学习笔记-Canvas标签的使用
Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...
- HTML 学习笔记 (canvas 基础)
1.什么是Canvas canvas就是一个画布,可以进行画任何的线,图形,填充等一系列操作.这一切都是用Js操作的,另外Canvas不仅仅提供简单的二维矢量绘图,也提供了三维的绘图,以及图片处理等一 ...
- Web前端学习笔记——Canvas
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- winform学习笔记-文档路径
获取应用程序路径 //获取当前进程的完整路径,包含文件名(进程名).string str = this.GetType().Assembly.Location;result: X:\xxx\xxx\x ...
- python学习笔记24(路径与文件 (os.path包, glob包))
os.path模块主要用于文件的属性获取,在编程中经常用到,以下是该模块的几种常用方法. >>> import os.path >>> path = '/home/ ...
- [Android学习笔记]Canvas的使用
Canvas文档 http://developer.android.com/training/index.html 在绘制view时候,重写onDraw(canvas)方法,可能需要在canvas上绘 ...
- [html5] 学习笔记-Canvas应用
通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...
- [html] 学习笔记-Canvas图形绘制处理
使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合 通过 globalCompositeOperation = 属性 来指定重叠效 ...
随机推荐
- bzoj1562【Noi2009】变换序列
题意:http://www.lydsy.com/JudgeOnline/problem.php?id=1562 给一个序列Di表示min(|i-Ti|,n-|i-Ti|),求一个字典序最小的序列Ti ...
- Android新手入门
本博客出自公众号安卓应用频道:http://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid=2652261947&idx=1&sn= ...
- oracle查看表空间物理文件的名称,路径及大小
select tablespace_name, file_id,file_name,round(bytes/(1024*1024),0) total_space from dba_data_files ...
- iOS设置状态栏的字体颜色
设置statusBar的[前景色部分] 1.plist设置statusBar 在plist里增加一行 UIStatusBarStyle(或者是“Status bar style”也可以),这里可以设置 ...
- 22、手把手教你Extjs5(二十二)模块Form的自定义的设计[1]
下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formScheme ...
- 巧用HTML5给按钮背景设计不同的动画
如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3 animation 来动画 background-size 和 background-posit ...
- Delphi 内存与指针
源:Delphi 内存与指针 Delphi 的内存操作函数(1): 给字符指针分配内存 Delphi 的内存操作函数(2): 给数组指针分配内存 Delphi 的内存操作函数(3): 给结构体指针分配 ...
- 编译uboot提示libasm-offsets.c10 error bad value (armv5)解决方法
编译uboot-2016.09提示如下错误: lib/asm-offsets.c:1:0: error: bad value (armv5) for -march= switch 解决方法: 1.在命 ...
- mongodb更新数据
1. 获取当前时间: Calendar.getInstance().getTime(); 2. 更新数据: public void updateProcessLandLog(ProcessLandLo ...
- zend framework 配置连接数据库
Zend_Db_Adapter是zend frmaeword的数据库抽象层api.基于pdo, 你可以使用Zend_Db_Adapter连接和处理多种 数据库,包括:microsoft SQL ...