canvas笔记--与图像绘制相关部分

最新推荐文章于 2024-04-17 17:10:25 发布

努力的豌豆芽

最新推荐文章于 2024-04-17 17:10:25 发布

阅读量135

点赞数

文章标签： js canvas html5

本文链接：https://blog.youkuaiyun.com/qq_44758643/article/details/108753010

版权

本文介绍如何使用HTML5 Canvas API绘制文本和图片。包括使用fillText和strokeText方法绘制填充文本和边框文本，并展示了如何从不同来源加载并绘制图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绘制文本

canvas提供两种方法来渲染文本

fillText(text, x, y [, maxWidth])

在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

strokeText(text, x, y [, maxWidth\])

在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

绘制填充文本方法实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d'); 
ctx.font='48px serif';
ctx.fillText("Hello world",10,50);
}
    </script>
</html>

在这里插入图片描述

绘制边框文本实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d'); 
ctx.font='48px serif';
ctx.strokeText("Hello world",10,50);
}
    </script>
</html>

效果：

在这里插入图片描述

获得需要绘制的图片

canvas的API可以使用下面的类型中的一种作为图片的源：

HTMLImageElement

这些图片是由Image()函数构造出来的，或者任何的<img>元素

HTMLVideoElement

用一个HTML的 <video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像

HTMLCanvasElement

可以使用另一个<video>元素作为你的图片源。

ImageBitmap

这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

使用相同页面内的图片

可以通过下面方法来获得canvas相同页面内的图片的引用

document.images集合
document.getElementsByTagName()方法
一样的可以用document.getElementById()获得这个图片

使用其他域名下的图片

在 HTMLImageElement上使用crossOrigin属性来获取可以跨域的其他域名上的图片，注意：不可跨域的图片运用这种方法会污染canvas

由零开始创建图像

运用脚本创建一个新的 HTMLImageElement对象。要实现这个方法我们用Image()构造函数

var img = new Image();   // 创建一个<img>元素
img.src = 'myImage.png'; // 设置图片源地址

当脚本执行后图片开始装载

若调用drawImage时，图片没装载完，哪什么也不发生

单为了防止旧的浏览器保存我们用load事件保证不会在加载完毕之前使用这个图片：

var img = new Image();   // 创建img元素
img.onload = function(){
  // 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址

通过data:url方式嵌入图像

Data urls允许用一串Base64编码的字符串的方式来定义一个图片

img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

使用视频帧

还可以使用<video>中的视频帧（即使视频是不可见的）

如：有一个id为myvideo的<video>元素

function getMyVideo() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

它将为这个视频返回HTMLVideoElement对象他可以作为我们的canvas图片来源

绘制图片

一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态，下面是最基础的一种。

SVG图像必须在

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    }
    img.src = 'images/backdrop.png';
  }