javascript学习记录——canvas元素的基本操作(2)_H5之家

<!DOCTYPE HTML> <HTML> <head> <title>几种矩形的绘制方法</title> <meta charset="UTF-8"> </head> <body> <canvas id="myCanvas" width="200" height="200" style="border:solid"> </canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.rect(10,10,50,50); context.stroke(); context.strokeRect(70,10,50,50); context.fillStyle = "#FF00FF"; context.fillRect(10,70,50,50); context.fillStyle = "#FF0000"; context.fillRect(70,70,50,50); context.clearRect(80,80,30,30); context.stroke(); </script> </body> </HTML>
运行效果：

圆与圆弧：

arc(x,,y,r,startA,endA,direction)函数：其中x，y代表圆心的位置，r代表半径，后面两个参数代表开始角度和结束角度，最后一个参数，代表画圆的方向是顺时针还是逆时针。该函数要搭配stroke()来使用，注意其中角度是弧度制|！

样例代码（绘制奥运五环）：

<!DOCTYPE html> <html> <head> <title>奥运五环</title> <meta charset="utf-8"> </head> <body> <canvas id="myCanvas" width="500" height="500" style="border:solid"> 你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。 </canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var degToRad = Math.PI/180; context.lineWidth = 5; context.beginPath(); context.strokeStyle = "blue"; context.arc(100,80,50,0,360*degToRad,true); context.stroke(); context.beginPath(); context.strokeStyle = "black"; context.arc(210,80,50,0,360*degToRad,true); context.stroke(); context.beginPath(); context.strokeStyle = "red"; context.arc(320,80,50,0,360*degToRad,true); context.stroke(); context.beginPath(); context.strokeStyle = "yellow"; context.arc(155,145,50,0,360*degToRad,true); context.stroke(); context.beginPath(); context.strokeStyle = "green"; context.arc(265,145,50,0,360*degToRad,true); context.stroke(); </script> </body> </html>
运行效果：

绘制文本：

fillText(text,x,y,maxWidth)函数和strokeText(text,x,y,maxWidth)函数：用来绘制文本，前者绘制的文本为空心字，后者为实心，参数text为文本内容，x，y为文本开始坐标，maxWidth为最大宽度，要是文本的内容超过最大宽度，会自动压缩到该宽度。

font可以设置字体大小和字体风格，例如：

context.font = "30px 宋体";

context.font = "40px 微软雅黑";

注：系统默认字体大小为10px

文本的粗细和倾斜：

表示粗细有四种属性值：normal（正常）、bold（粗体）、bolder（加粗体）、lighter（细柔）

设置方法例如：

context.font = "normal 30px 宋体";

context.font = "bold 40px 微软雅黑";

也可以用数字来直接设置：

context.font = "200 30px 宋体";

context.font = "400 40px 微软雅黑";

表示倾斜的有三种属性值：normal、italic、oblique，其中后两者能让字体倾斜，italic是指文本的倾斜体，oblique是指倾斜的文字，但效果基本一样。

样例代码：

<!DOCTYPE html> <html> <head> <title>文本1</title> <meta charset="utf-8"> </head> <body> <canvas id="myCanvas" width="350" height="200" style="border:solid"> 你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。 </canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.font = "30px Arial"; context.fillText("Hello World!", 20, 30); context.font = "bold 30px Arial"; context.fillText("Hello World!(bold)", 20, 70); context.font = "italic 30px Arial"; context.fillText("Hello World!(italic)", 20, 110); context.font = "oblique 30px Arial"; context.fillText("Hello World!(oblique)", 20, 150); context.font = "600 italic 30px Arial"; context.fillText("Hello World!(600 italic)", 20, 190); </script> </body> </html>
运行效果：

文本的对齐方式：

textAlign属性：修改文本的对齐方式，有五个属性：start，end，left，right，center。

textBaseline属性：修改文本的对齐基线，有6个属性：alphabetic,top,bottom,middle,hanging,ideographic。

样例代码：