#canvas课内总结

于 2015-07-26 11:39:24 发布
阅读量476 收藏
点赞数
分类专栏： 绘画 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqewkkkw/article/details/47066701
版权

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=180
Math.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 可选。要使用的图像的高度。（伸展或缩小图像）

青青baby
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值