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

canvas元素

总：canvas元素是javascript中一种绘图的重要工具

用法：

1，引入<canvas>元素

<canvas id="myCanvas" width="500" height="500" style="border:solid"> 你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。 </canvas>这句话的效果就是，在<body>元素中间添加一块画布，设置其宽度和高度，最后的style = "border:solid"的执行效果是将画布的边显示出来，方便我们看见画布的大小，中间的那段文字，在浏览器不支持canvas元素是就会显现出来。

2，获取上下文

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
第一句话，是通过canvas对象的id来获取canvas对象

第二句话，获取2d效果的文本

3，绘制基本图形

连线：

a，画线放法

moveTo(x,y)函数：确定线的其实坐标，x，y为画布中的起始坐标

lineTo(x,y)函数：确定线的终点坐标，x，y为画布中的起始坐标

srtoke()函数：将画好的坐标连接起来

b，线条属性

strokeStyle：改变线条的颜色

设置方法：

context.strokeStyle = "#F00";//用个十六进制数表示分别表示红绿蓝的程度

context.strokeStyle = "#FF0000";//用6个十六进制数分别表示红绿蓝的程度

context.strokeStyle = rgba(255,0,0,1);//前三个参量也是红绿蓝的程度，最后一个参量代表透明度

context.strokeStyle = "red";//用英文来代表颜色

lineWidth：设置线条的宽度，默认值为1

设置方法：

context.lineWidth = 数字（代表宽度）

lineCap()函数：设置线条的头的形状，有三种形式"round","square","butt",

设置方法：

context.lineCap = "butt";

lineJoin：设置线条转角的形状，有三种形式miter,round,bevel.

设置方法：

context.lineJoin = "miter";

(注：lineJoin属性为miter时的效果受到miterLimit属性的影响，miterLimit默认值为10，即外侧的延伸时两条交汇处内角与外角的距离)

以画正六边形为例给出示例代码：

<!DOCTYPE html> <html> <head> <title>正六边形</title> <meta charset="utf-8"> </head> <body> <canvas id="myCanvas" width="250" height="150" style="border:solid"> 你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。 </canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(60,30);//初始点 var k = -60,nowX =60,nowY = 30; var degToRad = Math.PI/180; context.strokeStyle = "#FF00FF";//设置线条颜色 context.lineWidth = 5;//设置线条宽度 context.lineJoin = "round";//设置拐点形状 while(k<270) { context.lineTo(nowX,nowY);//描出六边形的其他各点 k += 60; nowX = nowX + 60*Math.cos(k*degToRad); nowY = nowY + 60*Math.sin(k*degToRad); } context.closePath();//封闭图形 context.stroke();//连线 </script> </body> </html> 运行效果：