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

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>


【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. ECMAScript 位运算符

    位运算符是在数字底层(即表示数字的 32 个数位)进行操作的. 重温整数 ECMAScript 整数有两种类型,即有符号整数(允许用正数和负数)和无符号整数(只允许用正数).在 ECMAScript ...

  2. Android入门(六)碎片

    原文链接:http://www.orlion.ga/493/ 一.碎片 碎片(Fragment)是一种可以嵌入在活动当中的 UI片段,它能让程序更加合理和充分地利用大屏幕的空间,因而在平板上应用的非常 ...

  3. JAVA设计模式《一》

    设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于 ...

  4. Prim算法(二)之 C++详解

    本章是普里姆算法的C++实现. 目录 1. 普里姆算法介绍 2. 普里姆算法图解 3. 普里姆算法的代码说明 4. 普里姆算法的源码 转载请注明出处:http://www.cnblogs.com/sk ...

  5. JavaScript垃圾回收（二）——垃圾回收算法

    一.引用计数(Reference Counting)算法 Internet Explorer 8以下的DOM和BOM使用COM组件所以是引用计数来为DOM对象处理内存,引用计数的含义是跟踪记录每个值被 ...

  6. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  7. Linux - 变量

    printenv - print all or part of environment 显示所有变量:print 显示某个变量:print <variable name> 或者 echo ...

  8. 响应式网页中，如何只用CSS实现div的高和宽保持固定比例

    引言: 如果div里是<img>,原生就支持. .item img {     float: left;     margin:5%;     width: 20%; } >> ...

  9. 新人学习Android开发遇到的小问题总结

    1. IDE搭建: 搭建android的IDE时,先注意是什么版本的系统,64/32位系统. 通常使用的是Eclipse for android,Android Studio由于还需要FQ,网速慢,所 ...

  10. Android网格视图(GridView)

    GridView的一些属性: 1.android:numColumns=”auto_fit”   //GridView的列数设置为自动,也可以设置成2.3.4…… 2.android:columnWi ...