从0到1 html5 canvas,Html5 Canvas学习之路（五）

Canvas 图像(上)

Canvas 图像API可以加载图像数据，然后直接将图像应用到画布上。还可以裁切、拼贴图像数据，以显示用户需要的部分。此外，Canvas还提供了像素数据的存储功能，这样就能对其进行操作并且重绘到画布上。

1.图像基础

Canvas API提供对DOM定义的Image对象类型，在javascript中定义图像，创建JavaScript的方法: var image = new Image();，然后设置图像的源文件，只需要将URL指定给新建的Image对象的src属性即可。代码在调用图像之前，必须确认其已正确加载并且准备就绪。为此可以建立一个事件监听器，当图像的load事件触发时立即启动。

一旦图片加载完成，有多种方法可以将其显示在屏幕上。Canvas提供了一个如下方法来将图像数据显示到画布上：

drawImage(Image,sx,sy,sw,sh,dx,dy,dw,dh);

Image代表图片对象，sx,sy代表开始复制源图像上的“源位置”。sw和sh代表从(sx,sy)处开始取的矩形大小，dx和dx代表绘制到画布上的位置，dw,dh代表绘制到画布上的图像大小。

以下代码展示了在画布上绘制图片的方法：

var image = new Image();

image.addEventListener('load',eventImageLoaded,false);

image.src = 'img/1945.png';

function eventImageLoaded() {

context.drawImage(image,100,100,32,32,100,100,32,32);

}

2.帧式动画

帧式动画是指一项类似的现代技术，通过绘制每一个大小相同的帧来模拟动画。Canvas 可以利用drawImage()函数以及两个拼版来做动画。

需要创建一个count变量来作为计数器，并且还要创建一个计时循环。

代码示例如下：

var count= 20;

var image = new Image();

image.addEventListener('load',eventImageLoaded,false);

image.src = 'img/timg.jpg';

function eventImageLoaded() {

StartUp();

}

function StartUp() {

setInterval(drawScreen, 100);

}

drawScreen();

function drawScreen() {

context.lineWidth = 5;

context.strokeRect(0,0,theCanvas.width,theCanvas.height);

context.drawImage(image,count,20,135,80,100,100,135,90);

count += 135;

console.log(count);

if (count > 587){

count = 20;

}

然后可以生成这样一个动画：

从0到1 html5 canvas,Html5 Canvas学习之路（五）相关推荐

【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）
一.CSS3新增选择器 1.结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nt ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
c html canvas,HTML5 canvas
绘制圆形 function draw(id){ let canvas = document.getElementById(id) if (canvas == null){ return false } ...
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...
HTML5 中的canvas元素用于,HTML5中的Canvas元素
canvas 元素用于在网页上绘制图形. 什么是Canvas? HTML 5 的canvas元素使用JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas ...
【HTML5】在canvas上绘制简单的2D图形（+太极图）
canvas(画布) canvas 元素是H5中新增的一个重要元素,专门用来绘制图形.在页面中放置一个canvas元素,就相当于在页面上放置一块画布,可以利用 canvas api 在其中进行图形的描 ...
bubble html5,利用HTML5 Canvas创建交互式Bubble Chart
Josh Marinacci也在其博客中详细地介绍了"如何利用HTML5 Canvas创建可以在移动桌面上运行的交互式图表以及如何利用真实数据填充图表."下面让我们跟随作者学习如何 ...
html5画布页面,HTML5 界面元素 Canvas 参考手册
HTML5 界面元素 Canvas 参考手册转载请保留此句:太阳火神的美丽人生 - 本博客专注于敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否 ...
html5学习笔记---03.　Canvas简介,Canvas的使用方法
2013/6/10 03. Canvas简介 a.创梦技术qq交流群:CreDream:251572072 ------------------------- a.Canvas 元素是HTML5的新元 ...
android web canvas,HTML5 - Canvas无法在Android WebView的第一次加载时渲染
我正在开发基于HTML5画布的游戏,该游戏在现有应用程序的WebView中运行.在第一次运行游戏时,它会在后台成功加载,所有日志都表明它已准备就绪并正在运行.但是,WebView中不显示任何内容.如果 ...

从0到1 html5 canvas,Html5 Canvas学习之路（五）

从0到1 html5 canvas,Html5 Canvas学习之路（五）相关推荐

最新文章

热门文章