首页 前端知识 Html5之canvas详解

Html5之canvas详解

2024-02-02 09:02:42 前端知识 前端哥 789 668 我要收藏

前言

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是要放置的坐标

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1104.html
标签
评论
发布的文章

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

jQuery模板字符串

2024-02-14 09:02:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!