项目文件预览 - CanvasStudy - GitCode
原项目链接：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background: #dddddd; } #canvas { margin: 10px; padding: 10px; background: #ffffff; border: thin inset #aaaaaa; } </style> </head> <body> <!--canvas的默认大小是300*150像素--> <!--设置canvas的宽高的时候，不要通过CSS来设置width和height，因为CSS只能设置Canvas的元素本身大小，不能设置元素绘图表面（drawing surface）的大小--> <canvas id="canvas" width="600" height="300"> Canvas不被支持 </canvas> <p>设置canvas的宽高的时候，不要通过CSS来设置width和height，因为CSS只能设置Canvas的元素本身大小，不能设置元素绘图表面（drawing surface）的大小 <a href="CanvasSizeNotCSS.html">点击查看对比</a> </p> </body> <script> /** * 在页面中画一个canvas，然后在居中位置写上蓝色'Hello Canvas'，并加上文字描边 * @type {HTMLElement} */ var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); //设置字体格式 context.font = '38pt Arial'; //fillStyle设置或返回填充canvas的颜色、渐变、模式，其中CornflowerBlue 矢车菊蓝 context.fillStyle = 'cornflowerblue'; //strokeStyle用于设置或返回笔触的颜色、渐变、模式 context.strokeStyle = 'blue'; //设置文字的内容和位置 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> </html>
