canvas元素

最新推荐文章于 2024-07-26 09:01:30 发布

书香水墨

最新推荐文章于 2024-07-26 09:01:30 发布

阅读量1k

点赞数

分类专栏：前端文章标签： canvas

本文链接：https://blog.csdn.net/qq_27870421/article/details/89303815

版权

前端专栏收录该内容

178 篇文章 7 订阅

订阅专栏

1 canvas

<canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。
在开发基于Canvas的应用程序时的步骤：
(1)使用document.getElementById()方法S来获取指向canvas的引用。
(2)在canvas对象上调用getContext(_2d’)方法，获取绘图环境变量(注意，“2d”中的“d” 必须小写)-
(3)使用绘图环境对象在canvas元素上进行绘制。

2 canvas状态的保存与恢复

Canvas的API提供了两个名叫save()和restore()的方法，用于保存及恢复当前canvas绘图环境的所有屈性。可以像下面讲的这样使用这两个方法：

function drawGrid(strokeStyle, fillStyle) {
	controlContext.save(); // 将上下文保存到堆栈上
	controlContext.fillStyle = fillStyle; controlContext.strokeStyle = strokeStyle;
	// Draw the grid...
	controlContext.restore(); // 从堆栈还原上下文
}

绘图环境的save()方法会将当前的绘图环境压入堆桟顶部。对应的restoreO方法则会从堆栈顶部弹出一组状态信息，并据此恢复当前绘图环境的各个状态。这意味着可以嵌套式地调用 save()/restore()方法。

3 事件处理

鼠标事件

canvas.onmousedown = function(e) {

};
// 也可以使用更为通用的addEventListener()方法来注册监听器
canvas.addEventListener('mousedown', function(e){

});

除了 onmousedown之外，也可以使用onmousemove、onmouseup与onmouseout来注册监听器。使用onmousedown, onmousemove这样的方式来注册监听器，比调用addEventListener()要稍微简单些，不过，如果要向某个鼠标事件注册许多个监听器的话，那么就得使用 addEventListener()方法了。

// 将鼠标坐标转化为canvas坐标
function windowToCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return {
	x : bbox.left * (canvas.width /bbox.width),
	y : bbox.top * (canvas.height /bbox.height)
	}

键盘事件

当在浏览器窗口中按F某个键时.浏览器将会生成键盘你件。这些事件发生在当前拥有焦点的 HTML元素身上。假如没有元素拥有焦点，那么事件的发生地将会上移至window与document对象。
canvas是一个不可获取焦点的元索.所以，根据上一段中所讲的内容，在canvas元素上新增键盘事件监听器是徒劳的。如果想要检测键盘事件的话，你应该在document或window对象上新增键盘事件监听器才对。
一共有三种键盘取件：
•keydown
•keypress
•keyup
keydown与kcyup是底层亊件，几乎每次按键时，浏览器都会触发这些事件。请注意，有些按键敲击动作，例如某个特定的组合键.会被浏览器成操作系统吞掉，不过，绝大部分按键敲rli, 包括Alt、Esc等按键，还是能够通知给keydown与keyup啦件处理器的。
如果激发keydown亊件的那个按键会打印出某个字符，那么浏览器将会在触发keyup事件之前先产生keypress啦件。如果在一段时间内持续地按住某个可以打印出字符的键.那么浏览器就会在keydown与keyup事件之间产生一系列的keypress亊件。
按键监听器的实现方法同鼠标监听器类似。可以将某个函数赋值给document SL window对象的onkeydown、onkcyup 或onkeypress 变量，也可以用 keydown、keyup 或 keyPress 作为第一个畚数.用指向某个函数的引用作为第二个参数，来调用addEventListener()方法。
在绝大多数情况下，都可以使用如下两条简单的对策来处理这个问题：
•处理keydown与keyup事件时，看看浏览器传给亊件监听器的那个亊件对象中keyCode W 性的值。一般来说，如果是可打印的字符，那么城性值就会是其ASCII码。
•由于浏览器只会在产生可打印字符时才触发keypress事件，所以，在处理该事件时，可以放心地使用如下方式来获取字符：
var key = String.fromCharCode(event.which);

4 canvas元素的API

包括2个属性和3个方法

属性	描述	类型	取值范围	默认值
width	canvas元素表面的宽度	非负整数	任何非负整数	300
height	canvas元素表面的高度	非负整数	任何非负整数	300

方法	描述
getContext()	返冋与该canvas 元素相关的绘图环境对象，每个canvas 元素均有一个这样的环境对象，而且毎个坏境对象均与一个canvas元素相关联
toDataURL(type,quality)	返回一个数据地址(data URL),你可以将它设定为img元素的src属性值。第一个参数指定了图像的类型，例如image/jpeg或image/png，如果不指定第一个参数，则默认使用image/png。第二个参数必须是0~1.0之间的double值，它表示JPEG图像的显示质量
toBlob(callback,type,args…)	创建一个用于表示此canvas元素图像文件的Blob。第一个参数是一个回调函数，浏览器会以一个指向blob的引用为参数，去调用该回调函数。第二个参数以“image/png”这样的形式来指定图像类型。如果不指定，则默认使用“image/png”。最后一个参数是介于0.0~1.0之间的值。表示JPEG图像的质量。将来很可能会加入其它一些用于精确调控图像属性的参数。

5 一个简单的示例

<!DOCTYPE html>
<html>
<head>
    <title>A Simple Canvas Example</title>
    <style>

    body {
        background: #dddddd;
    }
    #canvas {
        margin: 10px;
        padding: 10px;
        background: #ffffff;
        border: thin inset #aaaaaa;
    }
    </style>
</head>
<body>
    <!-- 通过设置width和height属性会改变canvas本身大小以及绘图大小 -->
    <!-- 通过css设置width和height只会改变canvas本身大小-->
    <canvas id="canvas" width="600" height="300">
        Canvas not supported(浏览器在不支持canvas元素时显示)
    </canvas>

<script>

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

    context.font = "38pt Arial";
    context.fillStyle = 'cornflowerblue';
    context.fillText('Hello Canvas',canvas.width/2 - 150, canvas.height/2 + 15);

    context.strokeText('Hello Canvas',canvas.width/2 - 150,canvas.height/2 + 15);

</script>
</body>
</html>