首页 > 代码库 > Canvas标签初探
Canvas标签初探
学了一点基础知识，感觉好神奇，全部练习代码
<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=http://www.mamicode.com/""><br/> 3.canvas.getContext()方法返回canvasRenderingContext2D对象，属性和方法<br/> <a href=http://www.mamicode.com/‘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=http://www.mamicode.com/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游戏开发
Canvas标签初探
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。