一.使用图片

src：设置图片的地址。

onload：图片加载完立即执行。

drawImage的参数解析：

ctx.drawImage(image,100,100,400,200);

第一个参数：图片元素。

第二、三个参数：表示x坐标、y坐标。

第四、五个参数：表示图片的宽度、高度。

ctx.drawImage(image,100,100,400,200,90,90,50,50);

除了image之外，前四个参数用来描述图片，后四个参数用来描述切片（从图片中切出来的片）。

(100,100)是某部分图片的位置；400,200是图片的宽度和高度。

(90,90)是一个切片在画布上的位置；50,50是切片的宽度和高度。

二.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用图片</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="600" height="400" id="myCanvas"></canvas>
</body>
</html>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");// 1.创建一个image元素var image = new Image(); //用new来实例化对象// 2.用src去设置图片的地址image.src = "img/world.jpg";// 3.必须在onload之后再进行绘制图片，否则不会渲染image.onload = function(){ctx.drawImage(image,100,100,400,200,90,90,50,50); //设置图片的坐标位置(100,100)}
</script>

三.效果图

篇章

上一篇：canvas教程12-阴影

下一篇：canvas教程14-资源管理器

canvas教程13-使用图片相关推荐

canvas教程大纲
文章目录 canvas教程1-canvas的基本使用 canvas教程2-canvas的编程思想 canvas教程3-用面向对象思维来实现动画 canvas教程4-canvas的绘制功能 canvas ...
canvas教程14-资源管理器
文章目录一.资源管理器二.源码三.效果图篇章一.资源管理器资源管理器:在开发游戏的时候,静态资源是需要请求回来的. 如果游戏直接开始(静态资源没有被请求回来),那么网页可能会报错.空白等现 ...
canvas教程12-阴影
文章目录一.阴影二.源码三.效果图篇章一.阴影 shadowOffsetX与shadowOffsetY的值代表阴影偏移的坐标点. 如果值是正数,那么往右.下偏移:如果值是负数,那么往左.上偏 ...
canvas mdn_MDN文档 canvas教程笔记
MDN Canvas教程 API CanvasRenderingContext2D即canvas.getContext('2d')返回的对象类型,几乎所有作图操作基于这个"上下文对象&q ...
canvas教程16-滚动的车轮
文章目录一.滚动的车轮二.效果图篇章一.滚动的车轮 <!DOCTYPE html> <html lang="en"> <head>< ...
html5 canvas详解 pdf,html5 canvas教程 pdf
html5 canvas教程 pdf [2021-02-18 05:30:56] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(&q ...
html制作windows桌面,用html5 canvas制作Windows7桌面图片
手把手教你用html5制作canvas制作Windows7桌面图片,看起来好高大上哈.这里主要是要突出制作一张Windows7桌面图片使用的工具很简单,也不是真正的手把手,因为这方面实在不是强项.用n ...
canvas画布加载图片 - Kaiqisan
canvas画布加载图片就是往画布里面添加一些本地的或者网络上的图片.从而使画布图文并茂. 关键代码 let image = new Image(): 这里新增一个图片对象,它是一个图像的载体.但通 ...
WebRTC实时通信系列教程9 数据通道图片传输
[转载请注明出处: http://blog.csdn.net/leytton/article/details/76838194] PS:如果本文对您有帮助,请点个赞让我知道哦~ <WebRTC ...

canvas教程13-使用图片

文章目录

一.使用图片

二.源码

三.效果图

篇章

canvas教程13-使用图片相关推荐

最新文章

热门文章