学了一点基础知识，感觉好神奇，全部练习代码
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300</title>
<style>
body {
background: #dddddd;
}
#canvas {
margin: 10px;
padding: 10px;
background: #ffffff;
border: thin inset #aaaaaa;
}
#canvas2 {
margin: 10px;
padding: 10px;
background: #ffffff;
border: thin inset #aaaaaa;
width: 600;
height: 300;
}
</style>
</head>
<body>
<canvas id=‘canvas‘ width=‘600‘ height=‘300‘>
Canvas not supported
</canvas>
<br/>
1.canvas有两个大小，一个是元素本身的大小，一个是绘图的大小.<br/>
canvas默认绘图大小300,150.设置CSS元素后，会将图像拉伸<br/>
<canvas id=‘canvas2‘ class=‘canvas2‘ ><br/>
Canvas not supported
</canvas>
<br/>
2.canvas的toDataURL(type,质量)返回图像路径，可以作为img的src显示。<br/>
<img id=‘img2‘ src=""><br/>
3.canvas.getContext()方法返回canvasRenderingContext2D对象，属性和方法<br/>
<a href=‘http://www.w3school.com.cn/jsref/dom_obj_canvasrenderingcontext2d.asp‘ target=‘_blank‘>点这里！</a>
</body>
<SCRIPT TYPE="text/javascript">
var canvas = document.getElementById(‘canvas‘),
context = canvas.getContext(‘2d‘);
context.font = ‘38pt Arial‘;
context.fillStyle = ‘#a1a1a1‘;//字体填充的颜色
context.strokeStyle = ‘red‘;//字体描边颜色
context.fillText("Hello Canvas", canvas.width / 2 - 150,
canvas.height / 2 + 15);
context.strokeText("Hello Canvas", canvas.width / 2 - 150,
canvas.height / 2 + 15);
//alert(canvas.toDataURL("",1));
var image = canvas.toDataURL("image/png",0.1);//返回图像
document.getElementById("img2").src=image;//指定图像
var canvas2 = document.getElementById(‘canvas2‘),
context2 = canvas2.getContext(‘2d‘);
context2.font = ‘38pt Arial‘;
context2.fillStyle = ‘#a1a1a1‘;//字体填充的颜色
context2.strokeStyle = ‘red‘;//字体描边颜色
context2.fillText("Hello Canvas", canvas2.width / 2 - 150,
canvas2.height / 2 + 15);
context2.strokeText("Hello Canvas", canvas2.width / 2 - 150,
canvas2.height / 2 + 15);
</SCRIPT>
</html>
准备在石家庄从事HTML5游戏开发
时间： 2024-08-24 12:42:41