canvas画布
canvas(位图，像素图）
html5中提供了强大的图形处理功能canvas画布，但是不能使用css设置样式宽高，因为它是默认的300x150的画布，样式做伸缩，css设置它会以默认的样式等比放大/缩小整个画布
canvas 画布步骤
1.获取canvas 元素
2.搭建canvas绘制环境(所有的绘制行为都是在这个环境下进行)
3.在内存绘制(仅仅在内存中)
4.绘制到页面上(调用stroke方法)
<canvas id="myCanvas" width="200" height="200"> 您的浏览器版本过低，请更新浏览器 </canvas> // 获取canvas元素 var canvas = document.getElementById("myCanvas") // 搭建canvas画布的绘制环境 var ctx = canvas.getContext("2d");
样式
注意点：
如果使用了fillStyle来填充颜色，那么相对应的fillRect（x,y,w,h）来填充样式，fill（）绘制
如果使用了strokeStyle来描边样式，那么相对应的strokeRect(x, y, w, h)来描绘，stroke（）绘制
画一条线
//路径本身不可见，必须用于描边，填充，裁切
ctx.moveTo(100,400); // 起点坐标 ctx.lineTo(300,400); // 终点坐标 // 绘制到页面 ctx.stroke();
画圆
ctx.arc(300,300,50,0,2*Math.PI,true) // 参数1 参数2 表示圆心坐标 // 参数3 表示圆的半径 // 参数4 表示圆的起始角度 // 参数5 表示圆结束的角度 // 参数6 规定圆是沿顺时针还是逆时针false(1) true(0)是顺时针 ctx.stroke();
重绘和闭合路径
// // beginPath方法 程序运行遇到beginPath时 会在内存中将之前的路径全部清空 重新绘制 ctx.beginPath(); // closePath方法就是用来闭合路径的 ctx.closePath();
填充和描边
ctx.arc(300,300,50,0,2*Math.PI,true) ctx.lineWidth = 5; //宽度 ctx.strokeStyle = "red" // 设置描边颜色 ctx.stroke() // 描边 ctx.fillStyle = "#0f0" // 设置填充颜色 ctx.fill(); // 填充
三角形
ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100,100) ctx.lineTo(100,200) ctx.closePath(); ctx.stroke();
矩形
ctx.strokeRect(100,100,200,200); ctx.stroke(); // // strokeRect 四个参数 // // 参数1 参数2 表示矩形左上角坐标 // // 参数3 参数4
绘制矩形圆角
<style> body { text-align: center; } canvas { background-color: bisque; } </style> </head> <body> <canvas width="800" height="600"></canvas> <script> // arcTo 绘制圆角 // 参数一、二 x,y坐标 // 参数三、四 代表方向，也就是第二个坐标点 // 参数五 圆角 var canvas = document.getElementsByTagName('canvas')[0]; var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50 + 10, 20); ctx.arcTo(300, 20, 300, 400, 10); ctx.arcTo(300, 400, 50, 400, 10); ctx.arcTo(50, 400, 50, 20, 10); ctx.arcTo(50, 20, 300, 20, 10); ctx.stroke(); </script>
贝赛尔曲线
图片的绘制
