超级玛丽HTML5源代码学习------(一）
wust小吴
发布于 2022-03-03 12:40:01
发布于 2022-03-03 12:40:01
代码可运行
运行总次数：3
代码可运行
<pre name="code" class="html"><!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>My first Game</title>
<style type="text/css">
body {
/** 边框：无 0像素 */
border:none 0px;
/** 边外补白：向外填充0像素 */
margin:0px;
/** 向内填充：向内填充0像素 距上级边框0像素 */
padding:10px;
/** 设置字体大小 16px = 1em */
font-size : 16px;
background-color : #f3f3f3;
}
/** 画布 canvas */
canvas {
/** 边框：1像素 实线 蓝色 */
border : 1px solid blue;
}
</style>
<script type="text/javascript">
function init(){
// 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）
var canvas=document.createElement("canvas");
//设置canvas对象的高度和宽度
canvas.width=600;
canvas.height=400;
//将canvas加入到body的末尾
document.body.appendChild(canvas);
// 取得2d绘图上下文
// context是一个封装了很多绘图功能的对象
// 获取这个对象的方法是var context =canvas.getContext("2d");
// html5 目前好像只提供2D服务，它还是处女
var context= canvas.getContext("2d");
// 加载图片,加载后在context上进行绘制. (图片是异步加载,所以在onload事件里进行绘制)
var image = new Image();
//获取图像地址
image.src = "../res/bg.png";
//image的onload事件
image.οnlοad=function(event){
var loadedImg=event.target;
// 将加载后的图片,绘制在画布坐标[dx,dy]处,也就是图片的左上角坐标为[dx,dy]
//就是从左上角（0,0）开始绘制，高度为400.宽度为600
var dx=0, dy=0 ;
//加载图片后再context上进行绘制。
//绘制图像，drawImage有三种方法，
context.drawImage(loadedImg,dx,dy);
};
}
</script>
</head>
<body οnlοad="init()">
<div align="center"><a href="http://www.linuxidc.com" target="_blank">www.Linuxidc.com</a></div>
</body>
</html>对于canvas画布的深度学习：</pre><pre name="code" class="html">绘图 context.drawImage
context.drawImage(image,x,y)
image:Image对象var img=new Image(); img.src="url(...)";
x:绘制图像的x坐标
y:绘制图像的y坐标
context.drawImage(image,x,y,w,h)
image:Image对象var img=new Image(); img.src="url(...)";
x:绘制图像的x坐标
y:绘制图像的y坐标
w:绘制图像的宽度
h:绘制图像的高度
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制
image:Image对象var img=new Image(); img.src="url(...)";
sx：图像上的x坐标
sy：图像上的y坐标
sw：矩形区域的宽度
sh：矩形区域的高度
dx：画在canvas的x坐标
dy：画在canvas的y坐标
dw：画出来的宽度
dh：画出来的高度<script type="text/javascript">
//drawImage(image,x,y)
function draw28(id) {
var image = new Image();
image.src = "Image/html5.jpg";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image,0,0);
}
}
//drawImage(image,x,y,w,h)
function draw12(id) {
var image = new Image();
image.src = "Image/html5.jpg";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image, 50, 50, 300, 200);
}
}
//drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
function draw13(id){
var image = new Image();
image.src = "Image/html5.jpg";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸
}
}
</script>关于canvas学习的详细地址：
http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html</pre><pre name="code" class="html">本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
![[HTML5] Canvas绘制简单图片](https://ask.qcloudimg.com/http-save/yehe-2504969/5ifj6pms4m.png)
推荐阅读
相关推荐
超级玛丽HTML5源代码学习------（二）
更多 >
腾讯云开发者
