#canvas课内总结

canvas总结

简介

首先获取 canvas 对象，然后调用 canvas 对象的 getContext 方法，这个方法目前只能传入参数 “2d”，不久的将来他可能会支持参数 “3d”，你一定明白那意味着什么，让我们期待吧。

定义一个简单的画布，如果支持

<canvas id="first"width="250" height="250" style="background-color:red;">    你的浏览器不支持 Canvas 标签</canvas>      

var canvas = document.getElementById(‘first’);
var ctx = canvas.getContext(‘2d’);

判断语句

var canvas = document.getElementById('first');      if (canvas.getContext){     alert("支持 <canvas> 标签");   } else {     alert("不支持 <canvas> 标签");  }   

---

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fill() 方法。
注释：Internet Explorer 8 或更早的浏览器不支持 元素。

canvas元素绘制图像的时候有两种方法，分别是

context.fill()//填充

context.stroke()//绘制边框

style:在进行图形绘制前，要设置好绘图的样式

context.fillStyle//填充的样式

context.strokeStyle//边框样式

利用画布绘制矩形

   var canvas1=document.getElementById("first");   var cxt=canvas1.getContext("2d")   cxt.fillStyle="red"   cxt.fillRect(0,0,100,100)  

我们还可以这么玩

 var canvas1=document.getElementById("first");   var cxt=canvas1.getContext("2d")   cxt.fillStyle="red"   cxt.fillRect(0,0,100,100)   cxt.fillStyle="blue"   cxt.fillRect(60,60,100,100)   

看看效果

画一个圆出来、

---

http://www.neoease.com/html5-canvas-line-rectangle-circle-text/

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

这一共有 6 个参数.

x 是圆心的横坐标,
y 是圆心的纵坐标,
radius 是半径,
startAngle 是开始画圆的角度 ,
endAngle 是结束画圆的角度,

anticlockwise 是画圆方向. 弧长 Math.PI是半圆 Math.PI*2是整个圆
0.5为四分之一

       var canvas = document.getElementById('first');         var ctx=canvas.getContext("2d")         ctx.fillStyle="red"        //   ctx.beginPath();          ctx.arc(100,100,30,Math.PI * -1 / 4, Math.PI * 3 / 4,true);         // ctx.closePath();          ctx.fill();      100,100,30,0,Math.PI*2,true   

圆弧中心的坐标x和坐标y、圆弧半径、起始角度、终止角度、是否逆时针。

需要解释的是，第4个和第5个参数需要传入的是圆弧的弧度，如要画30度的角，需要将其转化成弧度30*Math.PI/180；第6个参数用来控制圆弧是顺时针旋转还是逆时针旋转。

  var canvas1=document.getElementById("first");   var cxt=canvas1.getContext("2d")   cxt.fillStyle="#FF0000";   cxt.beginPath();   cxt.arc(100,100,30,0,Math.PI*2,true);   cxt.closePath();   cxt.fill();  

画个圆2

var canvas1=document.getElementById("first");   var cxt=canvas1.getContext("2d")   cxt.fillStyle="red"   cxt.arc(100,100,50,0,45*Math.PI/180,true)//false----顺时针绘画     //true   逆时针绘画   cxt.fill();

绘制：

绘制矩形2：注意两者的区别，一个是填充的一个是绘制边框

 var canvas1=document.getElementById("first");   var cxt=canvas1.getContext("2d")   cxt.strokeStyle="#0000ff";   cxt.strokeRect(20,20,150,100);  

绘制一个圆出来

 var canvas1=document.getElementById("first");     var cxt=canvas1.getContext("2d")     cxt.beginPath();     cxt.arc(100,100,30,0,Math.PI*2,true);     cxt.closePath();      cxt.strokeStyle = 'red';     //cxt.lineWidth = 10;     cxt.stroke();  

画一个三角形

作业1：

案例1：得到画布中的坐标

<canvas id="first" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="go(event)" onmouseout="out()">你的浏览器不支持 Canvas 标签</canvas>   <div id="show"></div><script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");//var show=document.getElementById("show");document.getElementById("show").innerHTML='ds'function go(e){var x=e.clientX;var y=e.clientY; document.getElementById("show").innerHTML=x+" "+y;}function out(){show.innerHTML="";}</script>案例2，点击按键，画一条之间出来<canvas id="myCanvas">    你的浏览器不支持 Canvas 标签</canvas><button onClick="fun()">click me</button><script type="text/javascript">        function fun(){            var c=document.getElementById("myCanvas");            var cxt=c.getContext("2d");            cxt.strokeStyle = "#ccc";            cxt.moveTo(10,10);            cxt.lineTo(150,50);            cxt.stroke();        }</script>

那怎么画一个折线呢

cxt.lineTo(300,20);  cxt.stroke();  

想想怎么避免这种情况

 var canvas1=document.getElementById("first");   var cxt=canvas1.getContext("2d")   cxt.strokeStyle="red";   cxt.beginPath();   cxt.moveTo(10,10);   cxt.lineTo(150,150)   cxt.stroke()   cxt.closePath()   cxt.beginPath();   cxt.moveTo(10,10);   cxt.lineTo(150,250)   cxt.stroke()   cxt.closePath()

线性渐变:

context.createLinearGradient(x0,y0,x1,y1)

介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

gradient.addColorStop(“0”,”magenta”);

stop–介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

参数2：在结束位置显示的 CSS 颜色值 ：

我们可以使用画布的颜色

var canvas1=document.getElementById("first");var cxt=canvas1.getContext("2d") var gradient=cxt.createLinearGradient(0,0,170,0);gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");   // 用渐变进行填充      cxt.strokeStyle=gradient;     cxt.lineWidth=5;     cxt.strokeRect(0,0,100,100);     

解释：

.createLinearGradient(0,0,170,0)
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标

案例：

定义一个渐变（从上到下）作为矩形的填充样式：

 var c=document.getElementById("first");   var ctx=c.getContext("2d");   var my_gradient=ctx.createLinearGradient(0,0,0,170);   my_gradient.addColorStop(0,"black");   my_gradient.addColorStop(1,"white");   ctx.fillStyle=my_gradient;   ctx.fillRect(0,0,150,100);  

案例2：

定义一个从黑到红再到白的渐变，作为矩形的填充样式：

var c=document.getElementById("first");  var ctx=c.getContext("2d");   var my_gradient=ctx.createLinearGradient(0,0,170,0);   my_gradient.addColorStop(0,"black");   my_gradient.addColorStop(0.5,"red");   my_gradient.addColorStop(1,"white");   ctx.fillStyle=my_gradient;  ctx.fillRect(20,20,150,100);  

stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color 在结束位置显示的 CSS 颜色值

gradient.addColorStop(“0.5”,”blue”);

案例：

通过多个 addColorStop() 方法来定义渐变：

var c=document.getElementById("first");var ctx=c.getContext("2d");var grd=ctx.createLinearGradient(0,0,170,0);grd.addColorStop(0,"black");grd.addColorStop("0.3","magenta");grd.addColorStop("0.5","blue");grd.addColorStop("0.6","green");grd.addColorStop("0.8","yellow");grd.addColorStop(1,"red");ctx.fillStyle=grd;ctx.fillRect(20,20,150,100);

案例

  var c=document.getElementById("first");   var ctx=c.getContext("2d");   ctx.font="30px Verdana";// 创建渐变   var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");   gradient.addColorStop("0.5","blue");   gradient.addColorStop("1.0","red");// 用渐变进行填充   ctx.strokeStyle=gradient;   ctx.strokeText("hello world!",10,50);

高级：

scale()缩放

看看这段代码有什么用处

<canvas id="first">   你的浏览器不支持 Canvas 标签</canvas> var c=document.getElementById("first");   var ctx=c.getContext("2d");   ctx.strokeRect(5,5,25,15); ctx.scale(2,2);   ctx.strokeRect(5,5,25,15); ctx.scale(2,2);   ctx.strokeRect(5,5,25,15); ctx.scale(2,2);   ctx.strokeRect(5,5,25,15);context.scale(scalewidth,scaleheight);    

解析：

scalewidth  缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)  scaleheight 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)  

rotate——旋转

语法：

context.rotate(angle);  

ngle

旋转角度，以弧度计。
如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

案例：
——————————————————————
弧度 度数

转5度

包括圆形

context.rotate(5); 错误  不能直接使用度数   

度数—-弧度

Math.PI=180Math.PI/180 ===1弧度5*Math.PI/180===5弧度  

——————————————————————
不能直接使用度数

将矩形旋转 20 度：

  var c=document.getElementById("first");   var ctx=c.getContext("2d");   ctx.rotate(20*Math.PI/180);   ctx.fillRect(50,20,100,50);

translate()平移

context.translate(x,y)  

x-添加到水平x上的值
y-添加到水平y上的值

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillRect(10,10,100,50); ctx.translate(70,70); ctx.fillRect(10,10,100,50); 

transform替换绘图的当前转换矩阵

绘制一个矩形；

通过 transform() 添加一个新的变换矩阵，再次绘制矩形；
添加一个新的变换矩阵，然后再次绘制矩形。

请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建：

ctx.transform(1,0.5,-0.5,1,30,10);  

a 水平缩放绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图

 var c=document.getElementById("myCanvas");   var ctx=c.getContext("2d");   ctx.fillStyle="yellow";   ctx.fillRect(0,0,250,100)   ctx.transform(1,0.5,-0.5,1,30,10);   ctx.fillStyle="red";   ctx.fillRect(0,0,250,100);   ctx.transform(1,0.5,-0.5,1,30,10);   ctx.fillStyle="blue";   ctx.fillRect(0,0,250,100);

setTransform

绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。
请注意，每当您调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面：

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="yellow";ctx.fillRect(0,0,250,100)ctx.setTransform(1,0.5,-0.5,1,30,10);ctx.fillStyle="red";ctx.fillRect(0,0,250,100);ctx.setTransform(1,0.5,-0.5,1,30,10);ctx.fillStyle="blue";ctx.fillRect(0,0,250,100);

canvas font 属性

 var c=document.getElementById("myCanvas");   var ctx=c.getContext("2d");   ctx.font="40px Arial";   ctx.fillText("Hello World",130,150);context.fillText(text,x,y,maxWidth);   

text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。

渐变色创建文字

   var canvas1=document.getElementById("first");   var ctx=canvas1.getContext("2d")   ctx.font="30padient=ctx.createLinearGradient(0,0,180,0);   gradient.addColorStop("0","magenta");   gradient.addColorStop("0.5","blue");   gradient.addColorStop("1.0","red");   ctx.fillStyle=gradient;   ctx.fillText("w3school.com.cn",10,90);

— 后边讲

canvas textAlign 属性

extAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。

通常，文本会从指定位置开始，不过，如果您设置为 textAlign=”right” 并将文本放置到位置 150，那么会在位置 150 结束。

start 默认。文本在指定的位置开始。
end 文本在指定的位置结束。
center 文本的中心被放置在指定的位置。
left 文本左对齐。
right 文本右对齐。

   var c=document.getElementById("myCanvas");   var ctx=c.getContext("2d");

// 在位置 150 创建蓝线

   ctx.strokeStyle="blue";   ctx.moveTo(150,20);   ctx.lineTo(150,170);  ctx.stroke();  ctx.font="15px Arial";

// 显示不同的 textAlign 值

   ctx.textAlign="start";   ctx.fillText("textAlign=start",150,60);  //  ctx.textAlign="end";   ctx.fillText("textAlign=end",150,80);   ctx.textAlign="left";   ctx.fillText("textAlign=left",150,100);   ctx.textAlign="center";   ctx.fillText("textAlign=center",150,120);   ctx.textAlign="right";   ctx.fillText("textAlign=right",150,140);   

感兴趣自己来
textBaseline

关于图像

var img = new Image();   // Create new Image object    img.src = 'myImage.png'; // Set source path    

当脚本执行后，图片开始装载。若调用 drawImage 时，图片没装载完，脚本会等待直至装载完毕。
如果不希望这样，可以使用 onload 事件：

  var ctx = document.getElementById('myCanvas').getContext('2d');   var img = new Image();   img.src = 'oneeye.jpg';   img.onload = function()   {   ctx.drawImage(img,0,0);   ctx.beginPath();   } }

x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
ctx.drawImage(img,0,0,200,200);
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

   var myImage=document.getElementById("myCanvas");   var cxt=myImage.getContext("2d");   var img=new Image();   img.src="ji.png";   img.onload = function()   {   cxt.drawImage(img,0,0,50,50);   cxt.drawImage(img,30,30,50,50);   cxt.drawImage(img,60,60,50,50);   }

简单的使用

 <canvas id="myCanvas" style="width: 1000px; height: 600px;border: 1px solid #c3c3c3"></canvas> <script type="text/javascript">  var myImage=document.getElementById("myCanvas");  var cxt=myImage.getContext("2d");   var img=new Image();   img.src="1.jpg";   img.onload = function()   {  cxt.drawImage(img,0,0,200,90);   cxt.drawImage(img,60,30,200,90);   cxt.drawImage(img,90,60,200,90);   } </script>

这样做呢？

  cxt.drawImage(img,0,0,200,90);  cxt.drawImage(img,60,30,100,45);  cxt.drawImage(img,90,60,800,200);

图像的剪贴

  var canvas1=document.getElementById("myCanvas")  var ctx=canvas1.getContext("2d");   var img=new Image();   img.src='wode.gif'   img.onload=function(){   ctx.drawImage(img,10,10,30,30,50,50,100,100);   }  

img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）