浅谈Canvas

2024年3月25日 133次阅读 来源: 滕伟

上一篇给人人讲了一下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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞