HTML5_Canvas(2)

context.drawImage(imageObj,destX,destY);

//为某个画布贴上图片

 

例子:


1

2

3

4

5

6

7

8

9

10

11

12

13

window.onload = function(){

    var canvas = document.getElementById("myCanvas");

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

  

    var destX = 69;

    var destY = 50;

  

    var imageObj = new Image();

    imageObj.onload = function(){

        context.drawImage(imageObj, destX, destY);

    };

    imageObj.src = "darth-vader.jpg";

};

 

context.drawImage(imageObj,destX,destY,destWidth,destHeight);

//同上,在某个矩形框内显示图片,原始图片等比缩放
 

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

//截取原始图片的一个部分在矩形框内显示
 

context.font=[value];

//文字字体,例子:
context.font = "40pt Calibri";
 

context.fillStyle=[value];

//文字颜色
 

context.strokeStyle=[value];

context.strokeText("Hello World!", x, y);

//文字样式
 

context.textAlign=[value];

//文字显示在左边,中间还是右边
 

context.textBaseline=[value];

//文字显示在上面,中间还是下面(top, hanging, middle, alphabetic,ideographic, and bottom
 

context.shadowOffsetX=[value];

context.shadowOffsetY=[value];

//增加阴影

 

context.globalAlpha=[value];

//设置透明度,从0到1

时间: 2024-08-01 20:31:18

HTML5_Canvas(2)的相关文章

JS实现鼠标箭头变成一个燃烧烛光效果的方法

 这篇文章主要介绍了JS实现鼠标箭头变成一个燃烧烛光效果的方法,实例分析了javascript操作鼠标事件及图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现鼠标箭头变成一个燃烧烛光效果的方法.分享给大家供大家参考.具体如下: 这是一个完全的鼠标箭头美化效果的JS代码,通过这个JS代码,把鼠标的箭头加上一个样式,燃烧中的蜡烛.这个也是很古老的代码了,只能在IE8及以下浏览器运行,代码如下: 代码如下: <html> <head> <meta

HTML_5 Canvas(1)

HTML5 简介   HTML5相对于html4的优点是: 1 多了许多标签,提供了更为合理的Tag 2 提供了极为强大的API接口,使得以前需要使用复杂的javascrpt实现的功能直接使用标签就可以使用了 3 Html仍然在不断完善过程中,现在大部分浏览器已经具备了某些html5的支持,浏览器支持的比例按照google chrome,opera,firefox,safari,ie逐渐减少   Canvas 接口 HTML5提供<canvas>标签 比如<canvas id="

《HTML5 2D游戏编程核心技术》——第3章,第3.1节滚动背景和监控帧频

第3章 图形和动画是视频游戏的基础.能够绘制图形和图像是创造平滑的.不闪烁的动画最重要的技能之一,也是游戏开发人员必须要掌握的能力. 动画会持续地绘制动画帧,一般每秒30-60次.这个速率称为动画帧速率.每一个动画帧如同连环画的一页,每帧几乎和上一帧一样,仅仅存在着微小的差别,这样就可以在游戏快速显示动画帧时,创造出运动的效果.更多有关连环画的内容请阅读3.2节. 图3.1显示了一个单独的动画帧截图.这个游戏版本会保持这一状态到本章结束,图中显示了背景和平台从右向左滚动时的动画帧速率. 平台在动

JS实现鼠标箭头变成一个燃烧烛光效果的方法_javascript技巧

本文实例讲述了JS实现鼠标箭头变成一个燃烧烛光效果的方法.分享给大家供大家参考.具体如下: 这是一个完全的鼠标箭头美化效果的JS代码,通过这个JS代码,把鼠标的箭头加上一个样式,燃烧中的蜡烛.这个也是很古老的代码了,只能在IE8及以下浏览器运行,代码如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧

先给大家展示效果: 查看演示   源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看

浅析HTML5 Canvas入门教程及实例

什么是 Canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 你可以通过多种方法使用Canva绘制路径,盒.圆.字符以及添加图像. 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <canvas> 元素. 注意: Internet Explorer 8 及更早 IE