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

  1. drawImage(Img,x,y);

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

 
显示一个canvas图像：
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>picture.html</title>
  5.  
  6.     <meta name="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta name="description" content="this is my page">
  8.     <meta name="content-type" content="text/html; charset=UTF-8">
  9.  
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11.  
  12.   </head>
  13.  
  14.   <body>
  15. <p>画布:</p>
  16. <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
  17. 您的浏览器不支持 HTML5 canvas 标签。
  18. </canvas>
  19. <script>
  20. var c=document.getElementById("myCanvas");
  21. var ctx=c.getContext("2d");
  22. img = new Image();
  23. img.src="scream.jpg";
  24. img.onload = function()
  25. {
  26.     ctx.drawImage(img,10,10);
  27. }
  28. </script>
  29.   </body>
  30. </html>

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

 

canvas图像与<img>标签显示图像对比：
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>picture.html</title>
  5.  
  6.     <meta name="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta name="description" content="this is my page">
  8.     <meta name="content-type" content="text/html; charset=UTF-8">
  9.  
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11.  
  12.   </head>
  13.  
  14.   <body>
  15. <p>Image to use:</p>
  16. <img id="scream" src="scream.jpg" alt="The Scream" width="220" height="277">
  17.  
  18. <p>Canvas:</p>
  19. <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
  20. 您的浏览器不支持 HTML5 canvas 标签。</canvas>
  21.  
  22. <script>
  23. var c=document.getElementById("myCanvas");
  24. var ctx=c.getContext("2d");
  25. var img=document.getElementById("scream");
  26. img.onload = function() {
  27. 	ctx.drawImage(img,10,10);
  28. }
  29. </script>
  30.   </body>
  31. </html>


【HTML5】Canvas图像的更多相关文章

  1. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  2. HTML5 Canvas图像放大、移动实例1

    1.前台代码 <canvas id="canvasOne" class="myCanvas" width="500" height=& ...

  3. HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...

  4. html5 canvas用动画的形式装载图像

    本示例使用HTML5 canvas,简单的编写了装载图片效果, 请使用支持HTML5的浏览器预览效果: 下图为以逐渐横向栅格的效果图 html部分: <!DOCTYPE html> < ...

  5. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  6. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  7. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  8. 惊艳！9个不可思议的 HTML5 Canvas 应用试验

    HTML5 <canvas> 元素给网页中的视觉展示带来了革命性的变化.Canvas 能够实现各种让人惊叹的视觉效果和高效的动画,在这以前是需要 Flash 支持或者 JavaScript ...

  9. 简介 jCanvas：当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

随机推荐

  1. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  2. poj 2385Apple Catching（简单dp）

    /* 题意: 有两棵苹果树,每一棵苹果树每一秒间隔的掉落下来一个苹果,一个人在树下接住苹果,不让苹果掉落! 人在两棵树之间的移动是很快的!但是这个人移动的次数是有限制的,问最多可以接住多少个苹果! 思 ...

  3. linux分享六：字符串处理

    一:cut (1)其语法格式为:cut [-bn] [file] 或 cut [-c] [file] 或 cut [-df] [file] 使用说明cut 命令从文件的每一行剪切字节.字符和字段并将这 ...

  4. Java多线程系列--“JUC线程池”02之 线程池原理(一)

    概要 在上一章"Java多线程系列--“JUC线程池”01之 线程池架构"中,我们了解了线程池的架构.线程池的实现类是ThreadPoolExecutor类.本章,我们通过分析Th ...

  5. PHP的学习--cookie和session

    最近读了一点<PHP核心技术与最佳实践>,看了cookie和session,有所收获,结合之前的认识参考了几篇博客,总结一下-- 1. PHP的COOKIE cookie 是一种在远程浏览 ...

  6. Kubernetes系统架构简介--转

    原文地址:http://www.infoq.com/cn/articles/Kubernetes-system-architecture-introduction?utm_campaign=infoq ...

  7. Windows Azure Traffic Manager (5) Traffic Manager Overview

    <Windows Azure Platform 系列文章目录> 笔者默默地看了一下之前写的Traffic Manager内容,已经差不多是3年前的文章了.现在Azure Traffic M ...

  8. C#中enum类型

    最近碰到了枚举类型,就顺便整理下. 枚举的基类Enum,可以是除 Char 外的任何整型.不做显示声明的话,默认是整形(Int32). 声明一个Enum类型: /// <summary> ...

  9. SQL Server中的事务日志管理(9/9)：监控事务日志

    当一切正常时,没有必要特别留意什么是事务日志,它是如何工作的.你只要确保每个数据库都有正确的备份.当出现问题时,事务日志的理解对于采取修正操作是重要的,尤其在需要紧急恢复数据库到指定点时.这系列文章会 ...

  10. Laravel学习

    Laravel是个很强大的PHP框架,它剔除了开发中Web开发中比较痛苦的过程,提供了验证(authentication),路由(routing),Session和缓存(caching)等开发过程中常 ...