HTML5学习笔记（三）canvas画布基础

分手后的思念是犯贱 2022-04-17 00:26 333阅读 0赞

一、基本内容  
      Canvas在HTML页面提供画布的功能， 在画布中绘制各种图形  
      Canvas绘制的图形与HTML页面无关，无法通过DOM获取绘制的图形，也无法为绘制的图形绑定DOM事件，只能使用Canvas提供的API

二、Canvas用途  
       ① 在HTML页面中绘制图表(例如柱状图、饼状图等)  
       ② 网页游戏 - Flash技术  
            使用HTML5中的Canvas

三、如何使用Canvas  
     ① 在HTML页面中定义<canvas>元素  
     ②在javascript代码中，获取<canvas>元素  
     ③创建画布对象，用getContext('2d')方法

<!DOCTYPE html>
    <html>
     <head>
      <title>Canvas</title>
      <meta charset="utf-8" />
     </head>
     <body>
      
      <canvas id="canvas" width="500px" height="300px" style="background:pink"></canvas>
      <script>
    	// ② 获取<canvas>元素
    	var canvas = document.getElementById("canvas");
    	/* ③ 创建画布对象(根据<canvas>元素)
    	     getContext()方法, 返回值,就是画布对象
    	     参数 - 表示创建的是2D效果还是3D效果
             参数必须是"2d"或"3d"(固定写法)
    	 */
    	var context = canvas.getContext("2d");
    	// ④ 绘制图形（前面的三步是固定写法）
    	context.fillRect(10,10,100,100);
      </script>
     </body>
    </html>

四、 绘制矩形  
        fillRect(x,y,width,height) - 实心矩形          
       strokeRect(x,y,width,height) - 空心矩形  
       clearRect(x,y,width,height) - 清除指定区域的矩形      （可以组合使用制作直角折线）

x和y - 矩形的左上角坐标值， width - 设置矩形的宽度，height - 设置矩形的高度

设置颜色  
        fillStyle - 设置填充颜色  
        strokeStyle - 设置描边颜色  
        globalAlpha - 设置透明度(0-1)

五、绘制文字  
     方法  
      fillText(text,x,y) - 实心文字  
            text - 绘制的文字内容  
            x和y - 绘制的坐标值  
     strokeText(text,x,y) - 空心文字  
        属性  
           font - 类似于CSS中的font属性  
           textAlign - 设置文字的水平方向对齐  
                left - 左对齐，center - 水平居中，right - 右对齐  
           textBaseline - 设置文字的垂直方向对齐  
                top - 顶部对齐， middle - (垂直)居中对齐， bottom - 底部对齐，hanging - 悬挂基线，alphabetic - 字母基线  
              注意  
                  无论是水平方向还是垂直方向对齐,基准线对齐,并不是文字对齐  
                  无论是水平方向还是垂直方向对齐,并不是必要的属性(不使用也是可以的)

绘制基准线   context.beginPath();  
                                context.moveTo(0,300);  
                                context.lineTo(500,300);  
                                context.stroke();  
      阴影效果  
        shadowColor - 设置阴影颜色  
        shadowOffsetX - 设置水平方向阴影  
        shadowOffsetY - 设置垂直方向阴影  
        shadowBlur - 设置阴影的模糊程度

六、通过创建路径创建图形  
       ①(标识)方法  
            beginPath() -   表示开始创建路径  
            closePath() -   表示结束创建路径  
      ② 设置方法  
          矩形：     rect(x,y,width,height) - 设置矩形形状  
                  x和y - 设置矩形的左上角坐标值， width和height - 设置矩形的宽度和高度  
          圆形：     arc(x,y,radius,startAngle,endAngle,direction) - 设置圆形形状  
                  x和y - 设置圆形的圆心坐标值，radius - 设置圆形的半径，startAngle和endAngle - 设置圆形的起始位置  
                  direction - 按照顺时针或逆时针绘制，可以不用写，默认false表顺时针  
       ③绘制方法  
          stroke() - 绘制轮廓  
          fill() - 绘制填充

④ 使用创建路径绘制实心圆形

context.beginPath();  
           context.arc(170,60,50,0,Math.PI\*2);  
           context.fill();    //context.close()可以不用写

七、 绘制线条(直线和折线、多边形) - 创建路径  
         moveTo(x,y) - 设置这条线的起点坐标值  
         lineTo(x,y) - 设置这条线的终点(折点)坐标值  
     设置线条  
      lineWidth - 设置线条的宽度， 默认值为1(px)  
      lineCap - 设置线条端点的形状  
          butt - 默认值,平直， round - 圆角， square - 正方向  
      lineJoin - 设置两条线焦点的形状  
         miter - 默认值,尖角， round - 圆角， bevel - 斜角  
      miterLimit - 配合lineJoin使用  
         lineJoin设置为miter,该属性值设置尖角的延伸范围，为长度值。

八、图片处理  
   ① 绘制图片  
     drawImage(img,x,y) - 按照图片原大小加载  
        img - 当前加载(绘制)的图片，x和y - 绘制图片的坐标值(左上角)  
     drawImage(img,x,y,width,height) - 按照指定大小加载图片  
         img - 当前加载(绘制)的图片，x和y - 绘制图片的坐标值(左上角)， width和height - 设置绘制图片显示的宽度和高度  
     \* 注意： 必须保证图片加载完毕(onload事件)后,再绘制图片  
   ② 平铺图片  
      createPattern(img,type)  
        img - 平铺的图片  
        type - 平铺的方式  
            repeat - 平铺， no-repeat - 不平铺， repeat-x - 水平方向平铺， repeat-y - 垂直方向平铺  
   ③ 切割图片                    clip() - 切割(按照创建路径使用)

<!DOCTYPE html>
    <html>
     <head>
      <title>Canvas处理切割图片</title>
      <meta charset="utf-8" />
     </head>
     <body>
      <canvas id="canvas" width="512px" height="500px"></canvas>
      <script>
    	var canvas = document.getElementById("canvas");
    	var context = canvas.getContext("2d");
    	// 绘制图片
    	var myimg = new Image();
    	myimg.src = "1.jpg";
    	myimg.onload = function(){
    		context.drawImage(myimg,0,0,512,384);
    	}
    	// 切割图片
    	context.beginPath();
    	context.arc(240,100,80,0,Math.PI*2);
    	context.clip();
      </script>
     </body>
    </html>

九、 画布方法  
     ①scale(x,y) - 缩放(缩小或放大)  
        x - 表示水平方向的缩放， y - 表示垂直方向的缩放  
        参数的取值  
          如果为1的话,表示不缩放(原大小)， 如果小于1的话,表示缩小， 如果大于1的话,表示放大  
    ② translate(x,y) - 重新定位(x,y)  
        x，y - 新的坐标值， 注意 - x和y是相对于上次定位坐标值  
     ③rotate(旋转角度) - 旋转画布  
        公式为 degrees \* Math.PI / 180;