【HTML5】Canvas图像

最新推荐文章于 2021-06-17 06:18:37 发布

会做饭的技术男

最新推荐文章于 2021-06-17 06:18:37 发布

阅读量148

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjjabk20aajb.html

版权

前端专栏收录该内容

2508 篇文章 12 订阅

订阅专栏

把一幅图像放置到画布上, 使用以下方法:

drawImage(Img,x,y);

注：这里的Img必须是一个图像对象。

显示一个canvas图像：

<!DOCTYPE html>
<html>
  <head>
    <title>picture.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
<p>画布:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
img = new Image();
img.src="scream.jpg";
img.onload = function()
{
    ctx.drawImage(img,10,10);
}
</script>
  </body>
</html>

注：getContext("2d");是一个内置的HTML5对象，拥有多种绘制路径、矩形、圆形及添加图形的方法。

canvas图像与<img>标签显示图像对比：

<!DOCTYPE html>
<html>
  <head>
    <title>picture.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
<p>Image to use:</p>
<img id="scream" src="scream.jpg" alt="The Scream" width="220" height="277">
    
<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
    ctx.drawImage(img,10,10);
} 
</script>
  </body>
</html>

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML5】Canvas图像

把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y);注：这里的Img必须是一个图像对象。显示一个canvas图像：<!DOCTYPE html><html> <head> <title>picture.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3">...
复制链接

扫一扫