html图片上面怎么画,HTML5使用drawImage()方法绘制图像

一、绘制图像

使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。

drawImage(image,x,y) ：在canvas中(x,y)处绘制图片。

drawImage(image,x,y,width,height) ：在canvas中(x,y)处绘制图片，并将其缩放到指定的宽度和高度。

drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) ：从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight)，缩放到指定的宽度和高度，并在canvas中(x,y)绘制出来。

二、标签

绘制图片前，还需要将图片加载到浏览器中。这里我们仅仅在canvas标签后面添加一个标签。

三、绘制图片

复制代码代码如下:

HTML5

//这个函数将在页面完全加载后调用

function pageLoaded()

{

//获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同

var canvas = document.getElementById('tCanvas');

//获取该canvas的2D绘图环境

var context = canvas.getContext('2d');

//获取图片对象的引用

var image = document.getElementById('tkjpg');

//在(0,50)处绘制图片

context.drawImage(image,0,50);

//缩小图片至原来的一半大小

context.drawImage(image,200,50,165/2,86/2);

//绘制图片的局部(从左上角开始切割0.7的图片)

context.drawImage(image,0,0,0.7*165,0.7*86,300,70,0.7*165,0.7*86);

}

提示：你的浏览器不支持标签

四、绘制效果

五、附上原坦克素材

html图片上面怎么画,HTML5使用drawImage()方法绘制图像相关推荐

canvas - drawImage()方法绘制图片不显示的问题
canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等. 问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完w3 ...
HTML5 canvas drawImage() 方法记录
浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 drawImage() 方法. 注释:Internet Explorer 8 或 ...
python统计图片的纹理信息_python实现LBP方法提取图像纹理特征实现分类
题目描述这篇博文是数字图像处理的大作业. 题目描述:给定40张不同风格的纹理图片,大小为512*512,要求将每张图片分为大小相同的9块,利用其中的5块作为训练集,剩余的4块作为测试集,构建适当的模 ...
html5 canvas 图片拼接,HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
代码如下: Document *{margin:0 auto;} .box{border: 1px solid #ccc;width:1205px;height:400px;margin:0 auto ...
html5字体转换,图片转字符画html5版
该楼层疑似违规已被系统折叠隐藏此楼查看此楼像素操作
ML之SIFT_FLANN：FLANN算法的简介、使用方法(对图片提取SIFT特征并利用FLANN方法实现计算图像相似度并可视化案例)之详细攻略
ML之SIFT_FLANN:FLANN算法的简介.使用方法(对图片提取SIFT特征并利用FLANN方法实现计算图像相似度并可视化案例)之详细攻略目录 FLANN算法 1.flann的搜索步骤 (1) ...
HTML5系列代码：绘制一个圆形脸谱
drawImage() 方法绘制一幅图像. image 所要绘制的图像. 这必须是表示 img>标记或者屏幕外图像的 Image 对象,或者是 Canvas 元素. x, y 要绘制的图像的左上 ...
drawImage()方法
drawImage(image, x, y) drawImage(image, x, y, width, height) drawImage(image, sourceX, sourceY, sour ...
如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿
Html5 canvas drawImage图片抗锯齿2018-01-26 11:17 虽然drawImage会自动应用消除锯齿,但如果是从大尺寸变为小尺寸,某些图像就不尽人意了,比如曲线. 对于可能 ...

html图片上面怎么画,HTML5使用drawImage()方法绘制图像

html图片上面怎么画,HTML5使用drawImage()方法绘制图像相关推荐

最新文章

热门文章

html图片上面怎么 画,HTML5使用drawImage()方法绘制图像

html图片上面怎么 画,HTML5使用drawImage()方法绘制图像相关推荐

最新文章

热门文章

html图片上面怎么画,HTML5使用drawImage()方法绘制图像

html图片上面怎么画,HTML5使用drawImage()方法绘制图像相关推荐