HTML5画布-模式和阴影
创建模式
在画布上创建模式需要使用以下方法:-
序号 | 方法和描述 |
---|---|
1 | createPattern(image, repetition) 此方法将使用图像创建模式。第二个参数可以是一个字符串,具有以下值之一:repeat,repeat-x,repeaty,和no-repeat。如果指定空字符串或null,则将假定为repeat。 |
示例
以下是一个简单的示例,其中使用上述方法创建漂亮的图案。
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin: 0px auto;
}
</style>
<script type = "text/javascript">
function drawShape() {
// 通过DOM获取画布元素
var canvas = document.getElementById('mycanvas');
// 确保在不支持画布时不执行
if (canvas.getContext) {
// 使用getContext用于绘制画布
var ctx = canvas.getContext('2d');
// 创建新的图像对象以用作模式
var img = new Image();
img.src = 'images/pattern.jpg';
img.onload = function() {
// 创建模式
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150);
}
} else {
alert('您需要Safari或Firefox 1.5+才能查看此演示文稿。');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>
假设我们有以下图案 images/pattern.jpg 。
上面的示例将绘制以下结果——
创建阴影
HTML5画布提供了创建绘画周围的美丽阴影的功能。所有绘图操作都受四个全局阴影属性的影响。
序号 | 属性和描述 |
---|---|
1 | shadowColor [ = value ] 此属性返回当前阴影颜色,并可设置为更改阴影颜色。 |
2 | shadowOffsetX [ = value ] 此属性返回当前阴影偏移量X,并可设置为更改阴影偏移量X。 |
3 | shadowOffsetY [ = value ] 此属性返回当前阴影偏移量Y,并可设置更改阴影偏移量Y。 |
4 | shadowBlur [ = value ] 此属性返回应用于阴影的模糊级别,并可设置更改模糊级别。 |
示例
以下是一个简单的示例,其中使用上述属性绘制阴影。
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type = "text/javascript">
function drawShape() {
//使用DOM获取画布元素
var canvas = document.getElementById('mycanvas');
//确保在canvas不受支持时不执行
if (canvas.getContext) {
//使用getContext进行画布绘制
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("这是阴影测试", 5, 30);
} else {
alert('您需要Safari或Firefox 1.5+才能查看此演示文稿。');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>
以上示例将产生以下结果−