淘先锋技术网

首页 1 2 3 4 5 6 7

Html5之canvas详解

前言

canvas是html5中新增的标签元素，用于定义图形，如图标和其它图形，canvas相当于一个画布，绘制图形要通过js脚本来实现；

目前大部分主流高版本浏览器已支持canvas功能~

创建canvas画布仅需如下代码即可：

<canvas></canvas> // 标签内部无需加内容
<canvas>对不起，您的浏览器不支持canvas标签，请使用高版本浏览器</canvas> // 对于不识别的低版本浏览器，就会显示出此提示文字

使用方法

具体使用主要有以下几个步骤：

  • 创建画布
<canvas></canvas>

注意：画布的大小默认是150宽，100高，但是要改变画布大小，就一定要在canvas这个对象身上改变他的宽高，而不能在style上面直接更改~

<canvas width="200" height="500"></canvas> // 此方法可行
<style>
   canvas {
      width: 200px;
      height: 500px;
    }
</style>  // 此方法就会拉糊画面，不可取
  • 获取canvas标签
var canvas = document.getElementById('canvas');
  • 获取上下文对象
var ctx = canvas.getContext('2d'); // 相当于拿到了画画的工具箱
  • 开启一条路径
ctx.beginPath(); 即表示从此处开始作画
  • 画图（注意：这一步画布上并未有轨迹）
ctx.rect(40, 40, 120, 200) // 画一个矩形
  • 着色（注意：这一步画布上才有轨迹）
ctx.stroke(); // 空心的轨迹

其它功能

  • 清除画布

清除画布即是橡皮擦功能，可以将画布中内容抹掉；

clearRect(x, y, width, height); // 清除画布
  • 画直线
moveTo(x1,y1) // 起点坐标
lineTo(x2,y2) // 终点坐标
  • 画文字
fillText(text, x, y); // text是文字内容，x，y是坐标，画出来的是被填充的文字
strokeText(text, x,y); // 画出来的是空心的文字
textAlign = center|end|left|right|start // 分别表示在指定位置开始| 在指定位置结束 | 文本的中心被放置在指定位置 | 在指定位置开始 | 在指定位置结束

 例：

 // Create a red line in position 150
      ctx.strokeStyle="red";
      ctx.moveTo(150,20);
      ctx.lineTo(150,170);
      ctx.font = '14px 微软雅黑'
      ctx.stroke();
 // Show the different textAlign values
      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);

 

  • 渐变效果
createLinearGradient(x1,y1,x2,y2) // 创建渐变，x1，y1是渐变开始的位置，x2,y2是渐变结束的位置
addColorStop(stop,color) // 用于设置渐变对象中的颜色和位置，stop的值范围从0-1，表示渐变中开始与结束之间的位置

例：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
var grd = ctx.createLinearGradient(0,0,200,200);
grd.addColorStop(0.1, 'red');
grd.addColorStop(0.3, 'yellow');
grd.addColorStop(0.5, 'green');
grd.addColorStop(0.7, 'orange');
grd.addColorStop(1, 'pink');
// 应用渐变
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

  • 转移中心点
translate(x,y) // 重新映射画布上的(x,y)坐标位置
  • 绘制图片
ctx.drawImage(img,x,y) // 在画布上定位图像 img是要放置的图片 x，y是放置的坐标
ctx.getImageData(x,y,w,h) // 拷贝画布中指定矩形的像素数据 x，y是坐标 w，h是大小
ctx.putImageData(imgData,x,y) // 将图像数据放回画布上，imgdata为规定要放回画布的对象 x y是要放置的坐标