html5使用canvas绘制一张图片

 <canvas id="canvas" width="600" height="500" style="background-color: yellow;"></canvas>

代码如下:

var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var img=new Image();
img.src="cat.jpg";
cxt.drawImage(img,10,10,490,382);
/*
测试发现一个问题 在浏览器第一次执行的时候经常看不到图片,
在刷新一次后才能看到图片,有谁知道这是什么原因的,麻烦大神告诉我一下啊
.呵呵
*/

 

时间: 2024-08-02 14:18:39

html5使用canvas绘制一张图片的相关文章

js+html5实现canvas绘制镂空字体文本的方法

  本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3

js+html5实现canvas绘制简单矩形的方法

  本文实例讲述了js+html5实现canvas绘制简单矩形的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c

js+html5实现canvas绘制圆形图案的方法

  本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d

HTML5的canvas绘制矩形

问题描述 HTML5的canvas绘制矩形 为什么可是打开浏览器后变成了这样: 解决方案 原文:http://www.lifelaf.com/blog/?p=363 本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas Chapter 2 "The Basic Rectangle Shape".让我们来看一下Canvas内置的简单几何图形 - 矩形的绘制.在Canvas中,绘制矩形有三种方法:填充(fillRect)......答案就在这里:

js+html5实现canvas绘制椭圆形图案的方法_javascript技巧

本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法,HTML5 canvas 没有画椭圆的方法,以下代码可以画出椭圆,分享给大家供大家参考,具体实现方法如下: 1.在一个隐式的画布 (将 其 CSS 定义成:display:none; ) 上画园. 2.将隐式画布的影像,以不同的宽高比值,画在另一个显式的画布,以使园变成椭圆. 3.进而,加进动画功能. <html> <head> <meta http-equiv="Content-Type"

js+html5实现canvas绘制镂空字体文本的方法_javascript技巧

本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not s

js+html5实现canvas绘制网页时钟的方法_javascript技巧

本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex

js+html5实现canvas绘制简单矩形的方法_javascript技巧

本文实例讲述了js+html5实现canvas绘制简单矩形的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not sup

js+html5实现canvas绘制圆形图案的方法_javascript技巧

本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not sup