HTML5 canvas里的drawImage用法

关于canvas无法通过drawImage加载的原因

首先我们先来理解在html里图片的加载时是异步的。

（设置src本身是同步的，但是浏览器下载和显示图片是异步的。）

在资源还没有加载完成的时候就执行了drawImage

所以无法成功加载到画布当中。

因为图片是异步加载，

所以要加个onload事件

onload 事件会在页面或图像加载完成后立即发生。

先看正确代码：

    <p>要使用的图片:</p><img id="scream" src="img_the_scream.jpg"><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");var img = document.getElementById("scream");img.onload = function (){ctx.drawImage(img, 10, 10);}</script></body>

另一种写法就是放在window.onload里面

    window.onload = function () {var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var img = document.getElementById("scream");//图片资源加载时异步的。必须保证图片资源加载完成后才行        ctx.drawImage(img, 10, 10);}

这是有加onload效果图

这是我遇到的错误代码：

    <script>window.onload = function(){var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("scream");//图片资源加载时异步的。必须保证图片资源加载完成后才行        img.onload = function() {ctx.drawImage(img,10,10);}}</script>

效果图

在之前的代码中，由于有俩个onload执行js代码的时候图片还没有加载成功，

就调用了drawImage()方法，所以图片就无法显示。

理解有错误请指正

HTML5 canvas里的drawImage用法相关推荐

在HTML5 canvas里用卷积核进行图像处理
卷积什么是卷积? 就跳过一些用专业属于描述专业术语看完懵逼的解释了, 语文成绩很差的我尝试从字面解释什么是卷积... 卷,理解成一种压缩:积,乘积,积累: 卷积需要一个卷积核,通常是3x3或5x5的 ...
html canvas 图像边缘提取,在HTML5 canvas里用卷积核进行图像处理
卷积什么是卷积? 就跳过一些用专业属于描述专业术语看完懵逼的解释了, 语文成绩很差的我尝试从字面解释什么是卷积... 卷,理解成一种压缩:积,乘积,积累: 卷积需要一个卷积核,通常是3x3或5x5的 ...
html5中阴影,HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
html5怎么转换,HTML5 canvas中的转换方法
转换方法 scale(scalewidth,scaleheight) 缩放当前绘图至更大或更小 scalewidth 缩放当前绘图的宽度 (1=100%, ...
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
本文转自:http://www.jb51.net/html5/70317.html 在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊, ...
如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿
Html5 canvas drawImage图片抗锯齿2018-01-26 11:17 虽然drawImage会自动应用消除锯齿,但如果是从大尺寸变为小尺寸,某些图像就不尽人意了,比如曲线. 对于可能 ...
html5图片上写字,Html5 canvas画图教程20:在canvas里写字
文章写到现在才发现我忘了介绍在canvas上写字的方法,呃,这篇补上. 其实在canvas里写字是很简单的,他有两个原生方法,即strokeText(描边文字)和fillText(填充文字)--一看就 ...
html5使用阴影,HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = "red" 表示设置阴影颜色为红色 ...
php绘图和canvas,html5 canvas画图实例用法汇总
HTML5 canvas画图HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript).不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务.get ...

HTML5 canvas里的drawImage用法

HTML5 canvas里的drawImage用法相关推荐

最新文章

热门文章