赤蓝紫

V1

2022/06/16阅读:29主题:前端之巅同款

Canvas入门(一)

Canvas入门(一)

如果这篇文章对你有所帮助,点个赞呗!!!

创建canvas至少需要提供widthheight属性,才能通知浏览器需要多大位置画图。标签的内容是后备数据,在浏览器不支持canvas元素时显示。

<canvas id="mycanvas" width="200" height="200">haha</canvas>

可以通过if(canvas.getContext)来判断浏览器是否支持canvas

通过canvas.getContext('2d')可以获取 2D 绘图上下文。2D 绘图上下文提供了绘制 2D 图形的方法。左边原点(0, 0)在 canvas元素的左上角,x 坐标向右增长,y 坐标向下增长。

从画布上导出一张 PNG 格式的图片

<body>
  <canvas id="mycanvas" width="200" height="200">haha</canvas>

  <script>
    const mycanvas = document.getElementById("mycanvas");

    // 确保浏览器支持canvas
    if (mycanvas.getContext) {
      // 获得图像的数据URI
      const imgURI = mycanvas.toDataURL("image/png");
      console.log(imgURI);
    }
  
</script>
</body>
image-20220522110709840
image-20220522110709840

我们查看控制台可以发现,输出了一串base64编码,也就是说,canvas.toDataURL就是将画布 canvas转换成base64编码。

填充与描边

  • 填充就是以特定的样式填充形状,包括颜色、渐变、图像

  • 描边就是只给形状边界着色。

显示效果取决于两个属性:fillStylestrokeStyle

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  context.fillStyle = "#000";
  context.strokeStyle = "red";
}

没有效果? 别急,这是因为我们只是设置了填充和描边而已,想要它生效,还需要绘制出来才能有效果。

绘制矩形

与绘制矩形相关的方法有三个。它们都接收 4 个参数:矩形 x 坐标、矩形 y 坐标、矩形宽度和矩形高度。(单位是像素,但是传参时不需要传单位)

  1. fillRect
  2. strokeRect
  3. clearRect

fillRect:绘制并填充矩形

fillRect:以指定颜色在画布上绘制并填充矩形,填充色使用fillStyle来设置。

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  context.fillStyle = "pink";
  context.fillRect(10105050);

  context.fillStyle = "rgba(0, 0, 0, .1)";
  context.fillRect(30305050);
}
image-20220522110314237
image-20220522110314237

stokeRect:绘制矩形轮廓

stokeRect:绘制矩形轮廓,颜色由strokeStyle来指定。

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  context.strokeStyle = "red";
  // 设置描边宽度
  context.lineWidth = 5;
  context.strokeRect(10105050);

  context.strokeStyle = "blue";
  context.fillStyle = "rgba(0, 0, 0, .1)";
  context.strokeRect(30305050);
}
image-20220522110410841
image-20220522110410841

clearRect:擦除画布中某个区域

clearRect:擦除画布中某个区域,会把擦除的区域变透明。

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  context.fillStyle = "red";
  context.fillRect(00200200);

  context.clearRect(5050100100);
}
image-20220522110449360
image-20220522110449360

分类:

前端

标签:

JavaScript

作者介绍

赤蓝紫
V1

公众号:赤蓝紫