HTML5 canvas绘制图片

demo.js

window.onload=function() {
    createcanvas();

    drawImage();
}
 function createcanvas()  {
     var CANVAS=document.getElementById(‘mycanvas‘);
      context=CANVAS.getContext(‘2d‘);
 }

function drawImage() {
    var img=new Image();
    img.onload=function() {
        context.drawImage(img,0,0,200,200 );
    }
    img.src="img5.jpg";
}

  demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>

    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
    <canvas  id="mycanvas"   width="400" hight="400" >
<span>你的浏览器不支持canvas</span>
</canvas>

</body>
</html>

  图片:

效果:

 

 2017-09-08  08:09:02

时间: 2024-10-23 19:54:23

HTML5 canvas绘制图片的相关文章

使用 HTML5 Canvas 绘制出惊艳的水滴效果

HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作,具有极大的应用价值. 这里分享一个惊艳的 Canvas 水滴效果,双击可以把水滴分离:拖放到一起可以融合:晃动浏览器可以让水滴跳动:键盘左右键可以切换皮肤:上下键可以变换大小. 在线演示      插件下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

使用html5 canvas绘制圆形或弧线

注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链接以了解使用html5 canvas绘制图形的完整内容. 在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画

Html5 canvas 绘制彩票走势图

因需要 要实现一个类似彩票走势图的功能,初次学Html5 ,很多地方不明白,前段时间也发帖请教过这个问题,也是没给个明确说话,在网上搜了很多,也没有实现的例子,今天仔细研究了下,发现其实也不是很难,现将代码贴出来,共同学习! 先来一张效果图: 实现的代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <me

HTML5 Canvas绘制实时时钟

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>try to draw the colock</title> <script src="js/modernizr-1.7.js"></script> <script type="text/javascript"> wind

学习笔记:HTML5 Canvas绘制简单图形

HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" width="1024" style="border:1px solid #aaa;text-align:center;"> 你的浏览器不支持Canvas,请更新浏览器再试!!! </canvas> 在canvas标签之间应该做浏览器是否支持的检测,

HTML5 Canvas实现图片擦除效果

HTML5 Canvas实现图片擦除效果,该效果主要应用了canvas的globalCompositeOperation 属性值实现. index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximu

使用html5 Canvas绘制线条(直线、折线等)

使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeStyle 用于设置画笔绘制路径的颜色.渐变和模式.该属性的值可以是一个表示css颜色值的字符串.如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 globalAlpha 定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认

HTML5 Canvas 绘制加拿大枫叶旗

代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>加拿大枫叶旗</title> </head> <body onload="draw()">