标签:
学了一点基础知识,感觉好神奇,全部练习代码
<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游戏开发
标签:
原文地址:http://www.cnblogs.com/yanshanshuo/p/3870985.html