创建canvans元素 ■Canvan标签 "规定元素的id、宽度和高度 <canvas id="myCanvas"width="200"height="100"></canvas> "默认宽300像素，高150像素 ■当web浏览器不支持Canvans时的反馈信息 <canvas id="canvas"width="200height="100"> 写在这里面的内容将展示给不兼容canvas的浏览器 </canvas>
创建canvans元素 ▪Canvan标签 ▪规定元素的 id、宽度和高度 ▪默认宽300像素，高150像素 ▪当web浏览器不支持Canvans时的反馈信息 <canvas id="myCanvas" width="200" height="100"></canvas> <canvas id="canvas" width=“200" height="100"> 写在这里面的内容将展示给不兼容canvas的浏览器 </canvas>
实例：在canvas中绘制矩形 <body> <canvas id="myCanvas"> your browser does not support the canvas tag </canvas> 得到画布 <script type="text/javascript"> var canvas=document.getElementByld('myCanvas); var ctx=canvas.getContext('2d) ctx.fillStyle='#FF0000'; 创建context对象； ctx.fillRect(0,0_80,100): getContext("2d")对象是内建 的HTML5对象，拥有多种绘 </script> fillStyle方法将context对象染 制路径、矩形、圆形、字符以 <body≥ 成红色， 及添加图像的方法 fillRect方法规定了形状、位 置和尺寸。 fillRect方法拥有参数(0,0,80,100). 意思是：在画布上绘制80x100的矩形，从左上角开始(0,0) 理解坐标
实例： 在canvas中绘制矩形 <body> <canvas id="myCanvas"> your browser does not support the canvas tag </canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> 得到画布 创建 context 对象； getContext("2d") 对象是内建 的 HTML5 对象，拥有多种绘 制路径、矩形、圆形、字符以 及添加图像的方法 fillStyle 方法将context对象染 成红色， fillRect 方法规定了形状、位 置和尺寸。 fillRect 方法拥有参数 (0,0,80,100)。 意思是：在画布上绘制 80x100 的矩形，从左上角开始 (0,0)。 理解坐标
HTML DOM getContext()方法 定义和用法 getContext()方法返回一个用于在画布上绘图的环境。 语法 Canvas.getContext(contextID) 参数 指定了您想要在画布上绘制的类型。当前唯一的合法值 是”2d”,它指定了二维绘图，并且导致这个方法返回一个环 境对象，该对象导出一个二维绘图API。 提示：未来如果<canvas>标签扩展到支持3D绘图 getContext(O方法可能允许传递一个"3d'字符串参数。 返回值 一个CanvasRenderingContext2D对象，用它可以绘制到 Canvas元素中，实现了一个画布所使用的大多数方法
HTML DOM getContext() 方法 定义和用法 getContext() 方法返回一个用于在画布上绘图的环境。 语法 Canvas.getContext(contextID) 参数 指定了您想要在画布上绘制的类型。当前唯一的合法值 是”2d”，它指定了二维绘图，并且导致这个方法返回一个环 境对象，该对象导出一个二维绘图 API。 提示: 未来如果 <canvas> 标签扩展到支持3D绘图， getContext()方法可能允许传递一个”3d”字符串参数。 返回值 一个 CanvasRenderingContext2D 对象，用它可以绘制到 Canvas 元素中，实现了一个画布所使用的大多数方法
设置绘图样式 ·填充样式 fillStyle()颜色值支持半透明 ·描边样式 ·strokeStyle颜色值支持半透明 ·设定线条样式 ·设定线宽lineWidth() ·设定图线帽样式lineCap butt','round,'square' 。 线的链接样式lineJoin 'round,bevel','miter' ·绘制渐变 ·绘制线性渐变 ·绘制径向渐变
设置绘图样式 • 填充样式 • fillStyle() 颜色值支持半透明 • 描边样式 • strokeStyle() 颜色值支持半透明 • 设定线条样式 • 设定线宽 lineWidth() • 设定图线帽样式 lineCap 'butt','round','square' • 线的链接样式 lineJoin 'round','bevel','miter' • 绘制渐变 • 绘制线性渐变 • 绘制径向渐变
颜色、样式和阴影 颜色、样式和阴影 属胜 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 strokeStyle 设置或返回用于笔的颜色、渐变或模式 shadowColor 设置或返回用于阴累的颜色 shadowBlur 设置或返回用于阴景的模糊级别 shadowOffset)☒ 设置或返回阴影距形状的水平距离 shadowoffsetY 设置或返回阴影距形状的垂直距离
颜色、样式和阴影