浅谈Canvas

2024年3月27日 130次阅读 来源: 滕伟

上一篇给大家讲了一下canvas的一些概念性的东西，这一篇我们来讲一下canvas的最基础的应用：

定义一个canvas：​​

var ctx =document.getElementById_x(“canvas”).getContext(‘2d’);

（1）画图

ctx.fillStyle=”rgba(255,255,255,0.5)”;

ctx.fillRect(0,0,100,100)

（2）画路径
​beginPath()和closePath()表示的是canvas里面的绘制路径，不加的话会出现灵异事件,灵异事件通俗的讲就是后绘制的图形不能精确的识别上一线的开始处;

  ctx.beginPath();
  ctx.fillStyle='#f00';
  ctx.moveTo(10,10);
  ctx.lineTo(100,100);
  ctx.lineTo(100,150);
  ctx.lineWidth=10;
  ctx.lineCap='round';   //这个用来定义线段终点的类型
  ctx.linejoin='round';    // 定义线段的连接类型
  ctx.stroke();
  ctx.closePath();

（3）画圆

里面传6个参数,分别是起始坐标，半径，开始弧度，结束弧度，旋转方向;

ctx.beginPath();
ctx.arc(50,50,50,0,Math.PI,true);
ctx.fill();
ctx.fillStyle='#00f';
ctx.closePath();

（4）渐变

​在canvas中我们可以用createLinearGradient() 和createRadialGradient
() 来进行渐变的设置

放射性渐变
​（5）阴影

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = 'rgba(0,0,0,0.5)';
  ctx.font = '20px Times New Roman';   //文字
  ctx.fillStyle = 'black';            //文字填充颜色
  ctx.fillText('Hello World',5,30)  //在画布上绘制填充颜色的文字

fillText是指在画布上绘制文本；fillText(text,x,y,maxWidth)；

text — 画布上输出文本；

x — 相对于画布的X坐标

y — 相对于画布的Y坐标

maxWidth — 允许的最大文本宽度（可选参数）

    原文作者：滕伟
    原文地址: https://segmentfault.com/a/1190000007910737
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞