canvas绘制图片drawImage使用方法_html5教程技巧

来源:脚本之家  责任编辑:小易  

刚好我2113这有点代码:<!doctype html><html> <head> <meta charset="utf-8"> <!-- TemplateBeginEditable name="doctitle" --> <title>我的图片5261</title> </head> <body> <canvas id="Map" width="500" height="500" style="background:gray;"></canvas> <script> // 设置绘图环境 var myMap = document.getElementById("Map"); var cxt = myMap.getContext('2d'); // 设置图像位置初始4102位置的变量 var x = 20; var y = 20; // 创建绘图对象1653,并且画出来 var img = new Image(); img.src = "img/u55.png"; draw(); function draw() { cxt.clearRect(0, 0, 500, 500); x += 1; y += 5; cxt.drawImage(img, x, y, 80, 80); } window.setInterval(draw, 100); </script> </body></html>你把图片的路径改为你的图片路径就行了!www.zgxue.com防采集请勿采集本网。

不得不说,html5中的canvas真的非常强大,从图片处理,到视频处理,再到游戏开发,都能见到canvas的身影,然而,就这一个<canvas>标签,功能居然如此强大,这主要归功于canvas强大的API,也正是因为这么多的API,让很多人对canvas望而却步。

首先,你这个代码中最后的setInterval("draw()", 100);应该改为setInterval(draw, 100);第一个参数应该是方法名,虽然你那样写也会有效,但强烈建议不要那么写。然后你说你的代码只是在屏幕上闪一下,那么你在画的时候先调一下cxt.beginPath();

drawImage绘制图片

var img1 = document.getElementById("img

drawImagecanvas提供的一个方法,通过这个函数我们可以把一张图片绘制到canvas中。首先看看这个方法的声明:

我当初犯的大错误:请你一定记清楚了: ctx.drawImage(img,0,0); 改为 img.onload = function(){ctx.drawImage(img,0,0);} 只有img 加载完了

void ctx.drawImage(image, dx, dy);void ctx.drawImage(image, dx, dy, dWidth, dHeight);void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

使用HTML5 Canvas动态的绘制拓扑图: HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数

先来解释下几个参数: image:要绘制的图片,支持很多形式,比如CSSImageValueHTMLImageElementSVGImageElementHTMLVideoElementHTMLCanvasElementImageBitmap 或者OffscreenCanvas dx:d代表目的(destination),就是canvas上起点的x轴 dy:canvas上起点的y轴 dWidth:canvas上绘制的宽度 dHeight:canvas上绘制的高度 sx:s代表原来的(source),就是原始图片的起点的x轴 sy:原始图片的起点的y轴 sWidth:截取的原始图片的宽度 sHeight:截取的原始图片的高度

按照你的描述,估计你之前的代码有调用过 ctx.scale 或者 ctx.transform 函数,导致坐标轴被缩放了。 建议找到对应的缩放调用,合理使用 ctx.save 和 ctx

这么多的参数,我来用一句话总结下这个函数的功能:从任意位置截取指定大小的图片并将其以指定大小绘制在canvas上的任意位置。这里截取的大小就是sWidthsHeight来设置,dHeightdWidth就是绘制的大小。

说了这么多,来实际动手做一下:

<div style="border: 1px solid black; width: 300px;height: 300px;"> <canvas id="c1" width="300" height="300"></canvas> </div><script>var c = document.getElementById('c1');var ctx = c.getContext('2d');var img = new Image();img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg";img.onload = function (e) { drawImg(this);};function drawImg (img) { ctx.clearRect(0,0, c.width, c.height); ctx.drawImage(img, 0,0, 200, c.height);}</script>

这里我这用了5个参数,我们来试下其他几个参数,这里我就想要美女的头像并把它绘制到中间:

ctx.drawImage(img, 200,150, 160, 180, 70, 60, 160, 180);

做一个图片放大器

思路很简单,先获取鼠标位置的像素点,然后把它绘制成更大的区域,就实现了放大。话不多说,先上效果图:

代码也很简单:

<div style="border: 1px solid black; width: 300px;height: 300px;"> <canvas id="c1" width="300" height="300"></canvas> </div>

这里需要注意的是,图片资源不能跨域,比如这样:

// 图片改成百度的img.src = https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg;

在getImageData是就会报错,说是跨域了:

index.html:47 Uncaught DOMException: Failed to execute 'getImageData' on

'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

canvas中的抗锯齿

所谓抗锯齿,就是图片放大到很大时,能否看到一个一个的像素点,能看到就说明不抗锯齿,canvas中默认是开启了抗锯齿的,也就是imageSmoothingEnabled这个属性是true,开启抗锯齿会破坏原有像素,像素之间是平滑过渡的,一般肉眼是看不出来的,我们来做个对比:

// 关闭抗锯齿ctx.imageSmoothingEnabled = false;

明显的对比,关闭抗锯齿之后,放大区域像打了马赛克,能明显看到每个像素点,开启抗锯齿的情况下每个像素点之间的渐变则很顺畅,人眼看上去有种模糊的感觉。但从整个画面看,关闭抗锯齿后,图片模糊了很多。

用canvas来渲染视频

开头也说过,canvas能处理视频,现在我们用drawImage来渲染一个视频。

先说思路:每隔一段时间截取视频的当前帧,绘制出来。就是这么简单,上代码:

<video id="video1" controls="" width="180" style="margin-top:15px;"> <source src="1.mp4" type="video/mp4"></video><canvas id="c2" width="180" height="320"></canvas><script> var v=document.getElementById("video1");var c3=document.getElementById("c2");ctx3=c3.getContext('2d');var i = null;// 每20ms截取视频帧v.addEventListener('play',function() {i = window.setInterval(function() {ctx3.drawImage(v,0,0, 180, 320)},20);}, false);v.addEventListener('pause',function() {window.clearInterval(i);i = null;},false);v.addEventListener('ended', function() {clearInterval(i);i = null;},false);</script>

效果:

cool, 左侧是video标签显示的视频,右侧是我们用canvas绘制的,每20毫秒绘制一次,很棒哦。如果我们把时间放长一点,就能实现卡顿的效果😂

drawImageData兼容性

到此这篇关于canvas绘制图片drawImage使用方法的文章就介绍到这了,更多相关canvas绘制图片drawImage内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

img的onload事件。5261var img=new Image();img.src="a.png";img.onload=onloaded;function onloaded(e){console.log("图片加载完了");}<canvas width="1000" height="600" id="myCanvas" stylle="width:1000px;height:600px;"></canvas><script type="text/javascript">var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');var imagUrls=[",","];var n=0;loadImg();function loadImg(){4102if(n<imagUrls.length){1653var img=new Image();img.src=imagUrls[n];img.onload=onloaded;}else{console.log("图片加载完了");}}function onloaded(e){var img=e.target;ctx.drawImage(img,0,0);n++;loadImg();}</script>内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 详解canvas drawimage()方法绘制图片不显示的问题
  • html5 canvas api中drawimage()方法的使用实例
  • 有三张图片,我们要使用canvas drawImage() 方法把...
  • html5 canvas怎么让图片动起来, 我用的是drawImage...
  • 如何使用HTML5的Canvas图形元素绘制图形
  • html5 canvas的drawImage,如果有一堆图片,名字分...
  • 关于html5 canvas 绘图动画的问题,我要实现把一张...
  • HTML5如何通过canvas,把两张图片绘制到画布,然后...
  • Html5 用canvas绘制图片,绘制不出来。
  • 如何使用HTML5 Canvas动态的绘制拓扑图
  • HTML5、JS的canvas绘制图片的问题。。
  • 关于HTML5canvas 怎么向canvas中添加图片 最好能加...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5canvas详解canvas drawimage()方法绘制图片不显示的问题html5 canvas api中drawimage()方法的使用实例html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解html5中外部浏览器唤起微信分享功能的代码浅析html5 landmark详解html5中css外观属性详解如何在登录过期后跳出ifram框架html5中input输入框默认提示文字向左向右移动的示例代html5输入框下拉菜单功能的示例代码boostrap modal 闪现问题的解决方法html5 seo优化的一些建议amaze ui 文件选择域的示例代码h5封装下拉刷新
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved