1、 Canvas基础知识 1.2绘图方法 案例1 <IDOCTYPE htmI> chtmllangen"xmlns=http://ww.w3.org/1999/xhtm1> Head> <meta charset"utf-8/> < title)第一个 Canvas图形/ title head》 <body> canvas id='demowidth300 height=200" style="border: lpx solid #CCCCcc:"></canvas> script typetext/ javascript> 获取 canvas元素对应的象 ar canvas document getElementById("demo) 获取在 canvas上给图的 canvasRenderingContext2象 var ctx canvas getcontext(2d") /设填充颜色 ctx fillstyle =#007ACC /给制矩形 /htm1>
1、Canvas基础知识 1.2绘图方法 案例1： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>第一个Canvas图形</title> </head> <body> <canvas id="demo" width="300" height="200" style="border:1px solid #CCCCCC;"></canvas> <script type="text/javascript"> //获取canvas元素对应的DOM对象 var canvas = document.getElementById("demo"); //获取在canvas上绘图的canvasRenderingContext2D对象 var ctx = canvas.getContext("2d"); //设置填充颜色 ctx.fillStyle = '#007ACC'; //绘制矩形 ctx.fillRect(50, 50, 200, 100); </script> </body> </html>
2、图形绘制 21矩形 CanvasRendering Context2D提供了fi11Rect0和 strokeRect(这2 个绘制矩形的方法 ■ fillRect( float x, float y, float width, float height):用于填充一个矩形区 域,前两个参数x、y定义该矩形区域的起点坐标,决定了矩形的位置; width定义矩 形区域的宽度; heigh定义矩形区域的高度。 strokeRect( float x, float y, float width, float height):用于绘制一个矩形 边框,也就是用线条绘制出矩形的轮廓参数,功能和上一个方法相同
2、图形绘制 2.1矩形 CanvasRenderingContext2D提供了fillRect() 和strokeRect()这2 个绘制矩形的方法： fillRect(float x, float y, float width, float height)：用于填充一个矩形区 域，前两个参数x、y定义该矩形区域的起点坐标，决定了矩形的位置；width定义矩 形区域的宽度；height定义矩形区域的高度。 strokeRect(float x, float y, float width, float height)：用于绘制一个矩形 边框，也就是用线条绘制出矩形的轮廓参数，功能和上一个方法相同
2、图形绘制 21矩形 案例2 <I DOCTYPE htmI> htmllang=enxmlns=http://www.w3.org/1999/xhtm1> <meta charset=utf-8"/> tit1e>绘制简单矩形 title /head> <body <canvas id=demo width=400 height=180" style=border: 1px solid #CCCCCc; ></canvas> script type=text/javascript> /获取 canvas元素对应的DOM对象 var canvas document getElementById(demo?) //获取在 canvas上绘图的 canvasRenderingContext2对象 var ctx canvas getContext (2d") /设置填充颜色 ctx.fisy1e=’#007ACC /绘制矩形
2、图形绘制 2.1矩形 案例2： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>绘制简单矩形</title> </head> <body> <canvas id="demo" width="400" height="180" style="border:1px solid #CCCCCC;"></canvas> <script type="text/javascript"> //获取canvas元素对应的DOM对象 var canvas = document.getElementById("demo"); //获取在canvas上绘图的canvasRenderingContext2D对象 var ctx = canvas.getContext("2d"); //设置填充颜色 ctx.fillStyle = '#007ACC'; //绘制矩形
2、图形绘制 2.2线条 线条 线条在 Canvas绘图中被称为路径。 在 Canvas上使用路径的步骤如下: 定义路径,调用 CanvasRenderingContext2D对象的 beginPath0方法; 定义子路径,可以使用的方法有arcO、 arcTos、 bezierCurveToo、 lineToo、 moveTo、 quadraticCurveToo、rect0; 关闭路径,调用 CanvasRendering Context2D对象的 closePath0方法; 填充路径或绘制路径,调用 CanvasRenderingContext2D对象的fi110方法或 stroke( 方法
2、图形绘制 2.2线条 线条 线条在Canvas绘图中被称为路径。 在Canvas上使用路径的步骤如下： 定义路径，调用CanvasRenderingContext2D对象的beginPath()方法； 定义子路径，可以使用的方法有arc()、arcTo()、bezierCurveTo()、lineTo()、 moveTo()、quadraticCurveTo()、rect()； 关闭路径，调用CanvasRenderingContext2D对象的closePath()方法； 填充路径或绘制路径，调用CanvasRenderingContext2D对象的fill()方法或stroke() 方法
2、图形绘制 2.2线条 线条 CanvasRenderingContext2D绘制线条方法介绍如下 vetO( float x, float y):把 Canvas的当前路径结束点移动到x、y对应的点; lineto( float x, float y):把 Canvas的当前路径从当前结束点连接到x、y的对应 点
2、图形绘制 2.2线条 线条 CanvasRenderingContext2D绘制线条方法介绍如下： moveTo (float x, float y)：把Canvas的当前路径结束点移动到x、y对应的点； lineTo (float x, float y)：把Canvas的当前路径从当前结束点连接到x、y的对应 点