HTML5 canvas | 易学教程

canvas元素：

是HTML5新增的专门用来绘制图形的元素。canvas元素是一块无色透明的区域，它只是一个容器，本身不具备绘制的功能，开发者通过javascript脚本在区域上实现任意绘图。并不是所有浏览器都支持canvas元素。

camvas只有两个可选的属性width、height，如果不设置，则默认width为300，height为150，单位都是px。也可以使用css属性来设置宽高，但是如果宽高属性和初始比例不一样，会出现扭曲，所以建议不要使用css属性来设置宽高。

<body>
     <canvas id=”mycanvas” width=”” height=””>
           您的浏览器不支持canvas元素，请更新或更换您的浏览器。  //替代内容，如果浏览器不支持canvas元素，会显示替代内容。如果支持，会忽略替代内容，正常渲染canvas元素。
      </canvas>
</body>

步骤:

在html5页面的<body></body>元素中添加<canvas></canvas>元素

<canvas id=”mycanvas” width=”” height=””></canvas>

使用id寻找页面中的canvas元素

window.onload=function(){
    var canvas =document.getElementById(“mycanvas”);
}

使用canvas元素的getContext方法来获取其上下文，即创建Context对象，以获取允许进行绘制的2D环境。

if(!canvas.getContext) return;
 var context=canvas .getContext(“2d”);//获得内置对象，之后即可调用其方法。

使用javascript脚本来进行绘制

context.fillStyle=’#fff000’;//填充样式（颜色，图片）
context.fillRect(50,25,100,50);//绘制矩形，前两个数值是距离canvas元素左边和顶部的距离；后两个数值是矩形本身的宽高。

判断浏览器是否支持：

if (canvas.getContext){
  // drawing code here
} else {
  // canvas-unsupported code here
}

绘制矩形：

canvas只支持一种原生的图形绘制：矩形，其他图形都至少需要生成一种路径(path)。canvas提供了三种绘制矩形的方法：

fillRext(x,y,width,height)：绘制一个填充的矩形，前两个参数是矩形的左上角的坐标，后两个参数是矩形的宽高。
strokeRect(x,y,width,height)：绘制一个矩形的边框，前两个参数是矩形的左上角的坐标，后两个参数是矩形的宽高。
clearRect(x,y,width,height)：清除指定的矩形区域，然后这块区域就会变得完全透明，前两个参数是矩形的左上角的坐标，后两个参数是矩形的宽高。

context.fillRect(10, 10, 100, 50);  
context.strokeRect(10, 70, 100, 50);  
context.clearRect(15, 15, 50, 25);

在这里插入图片描述

绘制路径：

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

一般来说，画画之前可以先在画纸上绘制出一副草稿图，在完成时才把图形描边出来和填充颜色上去。
画布的绘图过程也不例外，但是在画布间的草稿图叫做路径。在画布的绘图方法中，基本上都是描绘路径的方法，仅仅调用这些方法画布是不会显示图像的，要把草稿图呈现，需要调用stroke()或fill()填充图形。

方法：

beginPath()：新建一条路径。

beginPath()就是告诉画布：我要开始画草稿了，请把之前的草稿都清除掉。
beginPath()是重新开始新路径，而把之前的路径都清空掉。
context.moveTo(50, 50);
context.lineTo(250, 50);
context.moveTo(50, 100);
context.lineTo(250, 100);
context.stroke();
不调用beginPath()，两条直线都绘制出来了。
context.beginPath();
context.moveTo(50, 50);
context.lineTo(250, 50);
context.beginPath();
context.moveTo(50, 100);
context.lineTo(250, 100);
context.stroke();
第二次调用beginPath()时清除了第一条线段的直线，没有草稿了，所以无法描边。
context.moveTo(50, 50);
context.lineTo(250, 50);
context.stroke();
context.moveTo(50, 100);
context.lineTo(250, 100);
context.stroke();
能看得出，第一条直线的颜色比第二条黑。
第一次调用stroke()时绘制了第一条直线；接下来没有调用beginPath()，于是第一条直线的路径一直保留着；然后添加了第二条直线，又再次调用了stroke()，画布会再沿着第一条直线描绘一次，然后再描绘第二条直线。所以第一条的颜色会比第二条的看起来更深。

moveTo(x,y)：把画笔移动到指定的坐标(x,y)，相当于设置路径的起始点坐标。
lineTo(x,y)：确定目标点。以上下文点为起点，到指定的点之间画一条直线。
closePath()：闭合路径，创建从当前点到开始点的路径。
arcTo()：在画布上创建介于两个切线之间的弧线，前面四个参数是两个点的坐标，最后一个参数是参数圆的半径。
quadraticCurveTo()：绘制二次贝塞尔曲线，每条曲线由一个上下文点，一个控制点，一个终止点来定义。
bezierCurveTo()：绘制三次贝塞尔曲线，每条曲线由一个上下文点，两个控制点，一个终止点来定义。有六个参数，前四个参数是两个控制点的坐标，后两个参数是终止点的坐标。
arc()：
rect(x,y,width,height)：绘制矩形，前两个参数为左上角的坐标，后两个参数为宽高。
stroke()：通过线条来绘制图形轮廓，默认黑色。
fill()：通过填充路径的内容区域生成实心的图形，默认黑色。

属性：

lineWidth：直线宽度。
lineCap：直线的端点样式，属性值有butt、round半圆、square，默认是butt。
lineJoin：miter(尖角)、round(圆角)、bevel(斜角)，默认miter样式。

绘制直线:

context.beginPath();
context.moveTo(200,canvas.height/2);
context.lineTo(canvas.width-90,canvas.height/2);
context.lineWidth=20;
context.strokeStyle=”red”;
context.lineCap=”round”;
context.stroke();

绘制弧线和曲线:

//弧线示例：
 context.beginPath();
context.moveTo(20,20);//创建起始点
context.arcTo(200,20,200,100,50);//创建弧。前面四个参数是两个点的坐标，最后一个参数是参数圆的半径。
context.stroke();

//二次贝塞尔曲线示例:
context.beginPath();
context.moveTo(200,canvas.height/2);
context.quadraticCurveTo(280,0,380,150,380,250);//前两个参数是控制点坐标，后两个参数是终止点坐标
context.stroke();

绘制矩形:

window.onload=function(){
     var c=document.getElementById(“mycanvas”);
     var context=c.getContext(“2d”);
     context.rect(10,50,200,100);//
     context.fillStyle=”red”;
     context.strokeStyle=”blue”;
     context.fill();
     context.stroke();
}

绘制圆：

window.onload=function(){
            var c=document.getElementById(“mycanvas”);
            var context=c.getContext(“2d”);
            var centerx=canvas.width/2;
            var centery=canvas.height/3;//设置圆心的坐标
            var radius=50;//设置圆的半径
            context.arc(centerx,centery,radius,0,2*Math.PI,fasle);//第四，第五个参数是起始弧度和结束弧度，弧度以x轴正方向为基准。false为顺时针，true为逆时针，第六个参数是可选的，默认为false。
            context.stroke();
}

绘制阴影：

必须位于fill()方法之前

属性:

shadowColor:设置阴影颜色
shadowBlur:设置阴影模糊度，数字越大越模糊
shadowOffsetX:设置阴影与原图的水平偏移距离
shadowOffsetY:设置阴影与原图的垂直偏移距离

绘制透明度：

必须位于fill()方法之前

属性:

globalAlpha:属性值必须是位于0.0(完全透明)与1.0(不透明)之间的数字。

绘制线性渐变:

createLinearGradient(x0,y0,x1,y1) 方法创建线性的渐变对象。渐变可用于填充矩形、圆形、线条、文本等的颜色。前两个参数为渐变的起点，后两个参数为渐变的终点。需要使用该对象作为 strokeStyle 或 fillStyle 属性的值。

使用addColorStop(index,color)方法定义色标的位置并上色。第一个参数为渐变中色标的相对位置(偏移量)，需要设定为0~1之间的浮点数，第二个参数为颜色值。

window.onload=function(){
           var c=document.getElementById(“mycanvas”);
           var context=c.getContext(“2d”);
           var clg=context.createLinearGradient(0,0,0,200);
           clg.addColorStop(0,”white”);//调用addColorStop()方法定义色标的位置并上色。第一个参数为渐变中色标的相对位置(偏移量)，需要设定为0~1之间的浮点数。
           clg.addColorStop(0.5,”red”);
           clg.addColorStop(1,”black”);
           context.fillStyle=clg;
           ctx.fillRect(20,20,150,100);
}

绘制径向渐变：

径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。调用createRadialGradient()方法创建渐变对象，有六个参数，前三个参数为第一个圆的圆心坐标和半径，后三个参数为第二个圆的圆心坐标和半径。第一个圆和第二个圆的圆心相同半径不同。调用addColorStop();方法定义色标的位置并上色。

绘制图案填充：

使用createPattern()方法创建一个图案填充对象，语法为context.createPattern(img,type)，其中type为平铺类型：repeat、repeat-x、repeat-y或no-repeat。

<html>
   <head>
          <script type=”text/script”>
                   function  draw(type){
                      var c=document.getElementById(“mycanvas”);
                      var cxt=c.getContext(“2d”);
                      cxt.clearRect(0,0,c.width,c.height);//清除矩形区域里的内容，否则点击一次按钮后再点击其他按钮内容不变
                      var img=documnet.getElementById(“mying”);
                      var pat=cxt.createPattern(img,type);
                      cxt.rect(0,0,500,200);
                      cxt.fillStyle=pat;
                      cxt.fill();
                   }
         </script>
   </head>
   <body>
               <img src=”...” id=”myimg”><br>
               <button onclick=”draw(‘repeat’);”>1</button>//点击不同的按钮去调用同一个函数并传入不同的参数
               <button onclick=”draw(‘repeat-x’);”>2</button>
               <button onclick=”draw(‘repeat-y’);”>3</button>
               <button onclick=”draw(‘no-repeat’);”>4</button><br>
               <canvas id=”mycanvas”  width=”500”  height=”200”>
               </canvas
  </body>

绘制图像:

context.drawImage(imageObj,x,y,width,height);

imageObj：图像源或其他的canvas
x,y:相对于canvas对象左上角位置的起始点坐标
width,height:尺寸大小。可以不写，默认原始图片大小

<html>
    <head>
            <script type=”text/script”>
                   window.onload=function(){
                      var canvas=document.getElementById(“mycanvas”);
                      var context=canvas.getContext(“2d”);
                      var iamgeObj=new image();
                      imageObj.src=””;
                      imageObj.onload=function(){
                        context.drawImage(imageObj,10,10);
                   }
           </script>
    </head>
    <body>
        <canvas id=”mycanvas”  width=”500”  height=”200”></canvas>
   </body>
</html>

context.drawImage(imageObj,sx,sy,sw,sh,dx,dy,dw,dh):增加参数实现对图像的裁剪。

sx,sy:代表原始图像被切割区域的起始坐标
sw,sh:原始图像被切割下来的宽高
dx,dy:切割下来的图像要放到的canvas中的起始位置
dw,dh:切割下来的图像要放到的canvas中显示的宽高。

绘制文本：

方法:

context.fillText(text,x,y);实心字体

text是绘制的文本的内容，x,y是绘制的文本的起始位置。

context.strokeText(); 描绘文本边缘（描边，空心字体）

同时要用strokeStyle属性替代fillStyle属性。
lineWidth属性可以设置描边的宽度。

measureText(“ ”)；文本度量，获取有关文本的尺度信息，参数是文本字符串，返回值是一个尺度对象。尺度对象中的数据是基于字符串参数和文本的字体信息而来的。通过width属性可以的到与之对应的文本宽度。

属性：

fillStyle/strokeStyle:设置文本颜色
font:设置字体，大小和样式。样式可以是normal,italic(斜体),bold,默认是normal
textAlign:设置文本的对齐方式，属性值有start(如果文字从左到右排版就左对齐，如果文字从右到左排版右就对齐),end(与start相反),left(左对齐),center,right,以x坐标所对应的那条线为参考线。

window.onload=function(){
           var canvas=document.getElementById(“mycanvas”);
           var context=convas.getContext(“2d”);
           var x=canvas.width/2;
           var y=canvas.height/2;
           context.font=”italc 20px Arial”
           context.fillStyle=”red”;
           context.fillText(“Hello”,x,y);
}

图形的变换:

移动坐标空间：使用translate();方法，将绘图原点横向和纵向移动到指定的位置(x,y)，表现为整张图像的移动。
旋转坐标空间：使用rotate();方法，接受一个以弧度为单位的旋转参数，以坐标原点为圆心进行旋转。

context.rotate(0.25*Math.PI);

缩放图形：使用scale();方法，参数x,y分别代表横向和纵向的缩放比例。两个参数都是浮点数，1.0表示不缩放，小于1.0表示缩小，大于1.0表示放大。

canvas状态的保存和恢复:

保存canvas状态：使用save();方法实现对坐标变换状态的保存。
恢复canvas状态：使用restore();方法实现对坐标变换状态的恢复。

保存与恢复一步对应一步。

context.save();

图形的组合与裁切:

图形的组合:

globalCompositeOperation属性:设置如何将一个源(新的)图像绘制到目标(已有的)图像上.

源图像:打算放置到画布上的绘图。
目标图像 :已经放置在画布上的绘图。

属性值:

source-over：源图像覆盖到目标图像上（默认）

source-atop：只显示目标图像，以及覆盖在目标图像上的源图像的重叠部分。

source-in：源图像覆盖在目标图像上，只显示源图像和目标图像的重叠部分，其余部分透明不可见。

sour ce-out：只显示源图像和目标图像不重叠的部分，目标图像和重叠部分透明不可见。

destination-over：目标图像覆盖在源图像上。

destination-atop：只显示源图像，以及覆盖在源图像上的目标图像的重叠部分。

destination-in：目标图像覆盖在源图像上，只显示目标图像和源图像的重叠部分，其余部分透明不可见。

destination-out：只显示目标图像和源图像不重叠的部分，源图像和重叠部分透明不可见。

lighter：显示源图像+目标图像，重叠部分做加色处理(发白)。

darker：显示源图像+目标图像，重叠部分做加色处理(发黑)。

xor：显示源图像+目标图像，重叠部分变为透明。

copy：只显示源图像。

//绘制的图形将画在现有画布之上
<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   	<script type="text/javascript">
   	$(document).ready(function(){
   		var canvas=document.getElementById("myCanvas");
   		var context=canvas.getContext("2d");
   		context.fillStyle="rgb(63,169,245)";
   		context.fillRect(50,50,100,100);
   		context.globalCompositeOperation="source-over"
   		context.fillStyle="rgb(255,123,172)";
   		context.fillRect(100,100,100,100);
   	});
   	</script>
   </head>
   <body>
   	<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
   </body>
</html>

在这里插入图片描述

图形的裁切:

使用clip();方法从原始画布中剪切任意形状和尺寸。
一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域，其他区域的内容不会被显示）。可以在使用clip();方法之前通过save();方法对当前画布区域进行保存，并在以后的任意时间通过restore();方法对其进行恢复。

//不使用clip();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
//使用clip();
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

在这里插入图片描述

来源：CSDN

作者：花铛

链接：https://blog.csdn.net/wsln_123456/article/details/103960027

标签

canvas

html5

context