6.HTML5基本Canvas 绘图

CanvasRenderingContext2D 对象

1.方法

void arc(float ,float y,float radius,float startAngle,float endAngle,boolean counterclockwise)添加一段弧void arcTo(float x1,float y1,float x2,float y2,float radius)添加一段弧void beginPath() void endPath() void bezierCurveTo(float x1,floaty1,floatx2,floaty2,float x,float y)添加贝济埃曲线void clearRect(float x,float y,float width,float height) void clip()裁剪一块CanvasGradient createLinearGradient(float xStart,float yStart,float xEnd,float yEnd)线性渐变Canvas Gradient createPattern(Image image,String style)创建一个图形平铺void drawImage(Image img,float x,float y)
void drawImage(Image img,float x,float y,float width,float height)
void drawImage(Image img,integer sourceX,integer sourceY,integer sourceWidth,integer sourceHeight,
integer destX,integer destY,integer destWidth,integer destHeight,) void fill() void fillRect(float x,float y,float width,float height) void fillText(string text,float x,float y,[float maxWidth]) void lineTo(float x,float y) void moveTo(float x,float y) void quadraticCurveTo(float cpx,float cpy,float x,float y)二次曲线void rect(float x,float y,float width,float height) void stroke() void strokeRect(float x,float y,float width,float height) void strokeText(string text,float x,float y,[float maxWidth])绘制矩形边框void save()绘制文本边框void restore()恢复之前保存的绘图状态void rotate(float angle)旋转坐标系统void scale(float sourceX,float sourceY)缩放坐标系统void translate(float destX,float destY)平移坐标系统  

2.属性 

CanvasRenderingContext2D 对象的属性

canvas 属性这个环境可以绘制于其上的 Canvas 元素。fillStyle 属性用来填充路径的当前的颜色、模式或渐变。这个属性可以设置为一个字符串或者一个 CanvasGradient 对象 或 CanvasPattern 对象。当设置为一个字符串时，它被解析为一个 CSS 颜色值并且用来进行实心填充。当设置为一个 CanvasGradient 或 CanvasPattern 对象，通过使用指定的渐变或模式来完成填充。globalAlpha 属性指定在画布上绘制的内容的不透明度。这个值的范围在 0.0（完全透明）和 1.0（完全不透明）之间。默认值为 1.0。globalCompositeOperation 属性指定颜色如何与画布上已有的颜色组合（合成）。如需更多细节，请参阅 globalCompositeOperation 属性参考页。lineCap 属性指定线条的末端如何绘制。合法的值是 "butt"、"round" 和 "square"。默认值是 "butt"。如需更多细节，请参阅 lineCap 属性参考页。lineJoin 属性指定两条线条如何连接。合法的值是 "round"、"bevel" 和 "miter"。默认值是 "miter"。如需更多细节，请参阅 lineJoin 属性参考页。lineWidth 属性指定了画笔（绘制线条）操作的线条宽度。默认值是 1.0，并且这个属性必须大于 0.0。较宽的线条在路径上居中，每边有线条宽的一半。miterLimit 属性当 lineJoin 属性为 "miter" 的时候，这个属性指定了斜连接长度和线条宽度的最大比率。如需更多细节，请参阅 miterLimit 属性参考页。shadowBlur 属性指定羽化阴影的程度。默认值是 0。阴影效果得到 safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。shadowColor 属性把阴影的颜色指定为一个 CSS 字符串或 Web 样式字符串，并且可以包含一个 alpha 部分来表示透明度。默认值是 black。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。shadowOffsetX, shadowOffsetY 属性指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。strokeStyle 属性指定了用于画笔（绘制）路径的颜色、模式和渐变。这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。
 



3.Demo

<h2> 绘制圆形 </h2><canvas id="mc" width="400" height="280"style="border:1px solid black"></canvas><script type="text/javascript">// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');for(var i = 0 ; i < 10 ; i++){// 开始定义路径ctx.beginPath();// 添加一段圆弧ctx.arc(i * 25 , i * 25 , (i + 1) * 8 , 0 , Math.PI * 2 , true);// 关闭路径ctx.closePath();// 设置填充颜色ctx.fillStyle = 'rgba(255 , 0 , 255 , ' + (10 - i) * 0.1 + ')';// 填充当前路径。ctx.fill();}</script>

<script type="text/javascript">function createRoundRect(context , x1 , y1 , width , height , radius){// 移动到左上角ctx.moveTo(x1 + radius , y1);// 添加一条连接到右上角的线段ctx.lineTo(x1 + width - radius, y1);// 添加一段圆弧ctx.arcTo(x1 + width , y1, x1 + width, y1 + radius, radius);// 添加一条连接到右下角的线段ctx.lineTo(x1 + width, y1 + height - radius);// 添加一段圆弧ctx.arcTo(x1 + width, y1 + height , x1 + width - radius , y1 + height , radius);// 添加一条连接到左下角的线段ctx.lineTo(x1 + radius, y1 + height); // 添加一段圆弧ctx.arcTo(x1, y1 + height , x1 , y1 + height - radius , radius);// 添加一条连接到左上角的线段ctx.lineTo(x1 , y1 + radius);// 添加一段圆弧ctx.arcTo(x1 , y1 , x1 + radius , y1 , radius);ctx.closePath();}// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');ctx.lineWidth = 3;createRoundRect(ctx , 30 , 30 , 200 , 100 , 20);ctx.stroke();</script>

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

<canvas id="mc" width="420" height="280" ></canvas><script type="text/javascript">/*该方法负责绘制多角星。n：该参数通常应设为奇数，控制绘制N角星。dx、dy：控制N角星的位置。size：控制N角星的大小*/function createStar(context , n , dx , dy , size){// 开始创建路径  context.beginPath();   var dig = Math.PI / n * 4;  for(var i = 0; i < n ; i++) {  var x = Math.sin(i * dig);  var y = Math.cos(i * dig);  context.lineTo(x * size + dx ,y * size + dy);}context.closePath();  }// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');// 绘制3角星createStar(ctx , 3 , 60 , 60 , 50);ctx.fillStyle = "#f00";ctx.fill();// 绘制5角星createStar(ctx , 5 , 160 , 60 , 50);ctx.fillStyle = "#0f0";ctx.fill();// 绘制7角星createStar(ctx , 7 , 260 , 60 , 50);ctx.fillStyle = "#00f";ctx.fill();// 绘制9角星createStar(ctx , 9 , 360 , 60 , 50);ctx.fillStyle = "#f0f";ctx.fill();</script>

              

<!--http://code.google.com/p/canvas-text/--><!--[if it IE 9]--><script src="ExplorerCanvas.js"></script><![end if]--><script>window.onload=function(){var canvas=document.getElementById("drawCanvas");var context=canvas.getContext("2d");context.lineWidth=10;context.strokeStyle = "red";//context.strokeStyle = "#cd2828";//context.strokeStyle = "rgb(205,40,40)";//context.lineCap="butt";//context.lineCap = "round";//context.lineCap = "square"; context.moveTo(10,10);context.lineTo(100,100);context.lineTo(10,100);context.lineTo(10,10);context.fillStyle = "blue";context.fill();context.stroke(); context.beginPath();context.fillStyle = "rgb(100,150,185)";context.lineWidth = 10;context.strokeStyle = "red"; //centerX,centerY,radius,startAngle,endAnglecontext.arc(250, 100, 50, 0, 2*Math.PI);context.fill();context.stroke(); context.beginPath();context.bezierCurveTo(80,130,90,90,50,130);//弧线context.stroke(); context.beginPath(); context.rect(240,240,40,40);//矩形context.stroke(); context.beginPath();context.translate(80,80);//偏移context.rect(240,240,40,40);context.stroke();context.beginPath();context.moveTo(10,10);//context.rotate(Math.PI/2);//旋转context.rotate(50);context.rect(240,240,40,40);context.closePath();context.stroke();context.beginPath(); context.fillStyle = "rgba(205,40,40,0.5)";context.moveTo(50,100);context.lineTo(250,200);context.lineTo(100,400);context.closePath();context.fill();context.stroke();};</script><canvas id="drawCanvas" width="800px" height="800px">The canvas isn't supported by the Broswer</canvas>

<script>  var canvas=null;  var context=null;  window.onload=function(){  canvas=document.getElementById("drawCanvas");  context=canvas.getContext("2d");    context.beginPath();  context.moveTo(10,10);  context.lineTo(100,100);  context.strokeStyle="red";  context.lineWidth=20;  context.lineCap="butt";  context.stroke();  };    function startDrawing(){  context.beginPath();  context.moveTo(0,0);  }  function drawing(){  context.lineTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);  context.stroke();  }  function clearCanvas(){  context.clearRect(0,0,canvas.width,canvas.height);  }  function saveImgFormCanvas(){  var img=document.getElementById("savedImageCopy");  img.src=canvas.toDataUrl();  }  </script>  <canvas id="drawCanvas"></canvas> <img id="savedImageCopy"><br>