1.添加引用\r\n右击项目-添加引用-浏览 找到本地的dll文件\r\n2.using 该dll文件里面代码的名称空间 \r\n然后就可以调用dll文件里面的类和方法
<canvas>定义和用法：
Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图 *** 作。
你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D 对象获得。 这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。
<canvas>标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas>标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。
提示：如果希望学习如何使用 <canvas>来绘制图形，可以访问 Mozilla 提供的Canvas 教程（英文）以及相应的中文 Canvas 教程。
使用 <canvas>标记绘图
大多数 Canvas 绘图 API 都没有定义在 <canvas>元素本身上，而是定义在通过画布的getContext() 方法获得的一个“绘图环境”对象上。
Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。
一旦定义了路径，其他的方法，如 fill()，都是对此路径 *** 作。绘图环境的各种属性，比如 fillStyle，说明了这些 *** 作如何使用。
注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas>图形，必须要么自己绘制它再用位图图像合并它，或者在 <canvas>上方使用 CSS 定位来覆盖 HTML 文本。
Canvas 对象的属性
height 属性
画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
width 属性
画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
html5中的canvas本身的API是不存在图层概念的。要想实现实现多图层功能，必须要使用多个canvas对象，不过这些canvas对象，是在内存中的，而不是在html的元素树中。每个canvas维持一个图层就可以，然后主canvas是负责显示最后的合成的效果。js动态创建canvas对象如下：
var layer1=document.createElement('canvas')
layer1.width=800
layer1.height=600
var layer1_canvas=layer1.getContext('2d')
var layer2=document.createElement('canvas')
layer2.width=800
layer2.height=600
var layer2_canvas=layer1.getContext('2d')
layer1_canvas.drawSomething()
layer2_canvas.drawSomething()
canvas.save()//用来显示的canvas
canvas.globalCompositeOperation="destination-over"//设置多个图层如何混合，这个可以百度canvas混合模式，这个和PS是相近的
canvas.drawImage(layer1,0,0,800,600,0,0,800,600)
canvas.drawImage(layer2,0,0,800,600,0,0,800,600)
canvas.restore()
这样就把两个图层绘制在一个图层中，单独改变任一个图层都不会改变其他图层。不明白可追问。
首先，你要创建一个HTML页面，其中包含如下canvas标签：
<!doctype html>
<html>
<head>
<title></title>
</head>
<body style=’position: absolutepadding:0margin:0height: 100%width:100%’>
<canvas id=”gameCanvas”></canvas>
</body>
</html>
如果你载入以上代码，当然什么也不会出现。那是因为虽然我们有一个canvas标签，但我们还没在上面绘制任何东西。我们来添加一些简单的canvas命令来绘制小箱子吧。
<head>
<title></title>
<script type=’text/javascript’>
var canvas = null
function onload() {
canvas = document.getElementById(‘gameCanvas’)
var ctx = canvas.getContext(“2d”)
ctx.fillStyle = ‘#000000′
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = ‘#333333′
ctx.fillRect(canvas.width / 3, canvas.height / 3, canvas.width / 3,
canvas.height / 3)
}
</script>
</head>
<body onload=’onload()’ …
在这个例子中，我已经在body标签中添加了一个onload事件，然后执行功能获得画布元素，并绘制几个箱子。非常简单。
result 1(from webappers.com)
这个箱子不错，但你会注意到，画布没有铺满整个浏览器窗口。为了解决这个问题，我们可以增加画布的宽度和高度。我是指根据画布所包含的文件元素的大小来灵活地调整画布尺寸。
var canvas = null
function onload() {
canvas = document.getElementById(‘gameCanvas’)
canvas.width = canvas.parentNode.clientWidth
canvas.height = canvas.parentNode.clientHeight
…
加载后，会看到画布铺满整个屏幕了。太好了。
再进一步，如果浏览器窗口大小是由用户调整的，还要重置画布的尺寸。
var canvas = null
function onload() {
canvas = document.getElementById(‘gameCanvas’)
resize()
}
function resize() {
canvas.width = canvas.parentNode.clientWidth
canvas.height = canvas.parentNode.clientHeight
var ctx = canvas.getContext(“2d”)
ctx.fillStyle = ‘#000000′
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = ‘#333333′
ctx.fillRect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3)
}
添加onresize命令到body标签。
<body onresize=’resize()’ …
现在，如果你调整浏览器的大小，矩形应该如下图所示。
result 2(from webappers.com)
载入图像
大部分游戏都需要动画的子画面，所以我来添加一些图像吧。
首先，你需要图像资源。因为我们要用javascript绘制它，所以我觉得先声明图像然后设置它的src属性为你想载入的图像的URL，比较合理。
var img = null
function onload() {
…
img = new Image()
img.src = ‘simba.png’
}
然后你可以通过添加这个到resize方法中来绘制图像：
ctx.drawImage(img, canvas.width/2 – (img.width/2), canvas.height/2 – (img.height/2))
如果重新载入页面后，在大部分情况下，会看到图像出现了。不过我说的是大部分情况下，因为这取决于机器跑得有多快、浏览器是否已经缓存了图像。那是因为resize方法的调用时间介于开始载入图像（设置它的src属性）的时间到浏览器准备好的时间之间。对于一两张图像，这个方法可能不错，但当的游戏开始变大时，就必须等到所有图像加载完才能执行活动。
给图像添加一个通知监听器，这样当图像准备就绪时就会收到回叫信号。我得重新整理一下，以下是更新过的代码：
var canvas = null
var img = nullvar ctx = null
var imageReady = false
function onload() {
canvas = document.getElementById(‘gameCanvas’)
ctx = canvas.getContext(“2d”)
img = new Image()
img.src = ‘images/simba.png’
img.onload = loaded()
resize()
}
function loaded() {
imageReady = trueredraw()
}
function resize() {
canvas.width = canvas.parentNode.clientWidth
canvas.height = canvas.parentNode.clientHeightredraw()
}
function redraw() {
ctx.fillStyle = ‘#000000′
ctx.fillRect(0, 0, canvas.width, canvas.height)
if (imageReady)
ctx.drawImage(img, canvas.width/2 – (img.width/2), canvas.height/2 – (img.height/2))
}
结果应该是：
这个图像显示了的6个奔跑帧。为了把这个子画面做成动画，必须每次绘制一个帧。
子画面动画
可以用drawImage命令的源参数绘制一个帧。事实上，是只绘制源图像的一部分。所以为了绘制这唯一的第一帧，使用允许你指定源图像中的矩形的drawImage的拓展版。因为的猫动画是由6个96 x 96象素大小的帧组成的，可以添加：
ctx.drawImage(img, 0, 0, 96, 54, canvas.width/2 – 48, canvas.height/2 – 48, 96, 54)
这里的关键是起点（0, 0, 96, 54）。这限制被绘制图像为猫动画的第一帧。还设置根据单帧来居中，而不是包含所有6帧的整个图像尺寸。
现在总算有点意思了。为了让图像动起来，我必须追踪要绘制的帧，然后随着时间推进帧数。为此，必须把静止页面做成隔时循环的页面。
按照老方法来做。添加60帧每秒间隔计时器。为了保证只有图像加载后才开始循环动画，要在loaded功能中添加以下命令：
function loaded() {
imageReady = true
setTimeout( update, 1000 / 60 )
}
添加更新后的函数，然后调用redraw：
var frame = 0
function update() {
redraw()frame++
if (frame >= 6) frame = 0
setTimeout( update, 1000 / 60 )
}
当绘制后且帧推进完，计时器就会重置。
下一步，调整绘制图像，使源窗口根据我们想要绘制的那一帧位置来移动（关键是给帧设置的源X位置，是帧乘上帧的大小）。
function redraw() {
ctx.fillStyle = ‘#000000′
ctx.fillRect(0, 0, canvas.width, canvas.height)
if (imageReady)
ctx.drawImage(img, frame*96, 0, 96, 54,
canvas.width/2 – 48, canvas.height/2 – 48, 96, 54)
}
结果如下：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）