> web前端 > HTML 5 > 正文 HTML5 Canvas知识点学习笔记 2014-06-12         来源：HTML5 Canvas知识点学习笔记      我要投稿 canvas

① 主要作用：绘制矢量图 ② 矢量图图形（路径）-（ILL） 位图图像（像素点）- PS中图像都是位图 ③ Canvas 能够制作动画,但是不是为了制作动画而生的也能够制作游戏。主要为了绘图而生。 ④ 能够设置宽高 推荐样式写在style；Canvas 相当于是一个绘制图形的容器，并没有绘制功能，需要借助JS（脚本）实现绘制功能。

思路：

getContext( ) var context = cnvas.getContext('2d'); // 图像的绘制
// 开始 beginPath（）开始路径
// 起点
// 过程路径
// 终点
// 落笔
// 结束 closePath（）结束路径

方法：

beginPath（） 开始路径 moveTo（x,y） 把路径移到画布中指定点 不创建路径 lineTo（x,y） 添加一个新点 closePath（） 结束路径 fillStyle 用来设置填充颜色 stroke 绘制异地内衣好的路径 fill（） 填充已定义好的路径

context.lineWidth = 5; 主要书写顺序 先颜色再填充

<script>
var cnvas = document.getElementById('cnvas');
var context = cnvas.getContext('2d');
context.moveTo(200,100);
context.lineTo(600,100);
context.lineTo(600,300);
context.lineTo(200,300);
context.lineTo(200,100);
context.closePath();
context.fillStyle = 'red';
context.stroke(); // 描边
context.fill(); // 填充颜色
</script>

矩形的绘制： rect（x，y，w，h） ：x y为起始坐标 w,h为矩形的宽 高 fillRectvc3Ryb25nPqOoeKOseaOsd6OsaKOpo7qyzsr9zazJzyDT68nPw+bH+LHwo7rJz8Pm1ru75tbGo6yyu8zus+SjrGZpbGxSZWN0o6ijqczus+QKPHN0cm9uZz7UstDOtcS75tbGo7o8L3N0cm9uZz4KPHN0cm9uZz5hcmM8L3N0cm9uZz6jqHijrHmjrHKjrHNho6xlYaOsdHJ1ZS9mYWxzZaOpIAp4IHnOqtSy0MTX+LHqo6xyzqqw6762o6xzYSBlYbfWsfDOqsbwyry9x7bIus294cr4vce2yKOs1+6689K7uPayzsr9zqp0cnVlIMuzyrHV67ut1LKjrCBmYWxzZc6qxObKsdXru63UsgoKCgo8dGFibGUgYm9yZGVyPQ=="1" cellpadding="2" cellspacing="0">

var cnvas = document.getElementById('cnvas');
var context = cnvas.getContext('2d');
for (var i = 0; i < 5; i++) {
context.beginPath();
context.strokeStyle = 'red';
// context.arc(10*Math.pow(2,i),100,10*Math.pow(2,i),0,Math.PI*2,true);
context.arc(10*i,100,10*i,0,Math.PI*2,true);
context.stroke();
context.closePath();
};
for (var i = 0; i < 5; i++) {
context.beginPath();
context.strokeStyle = 'yellow';
context.arc(10*Math.pow(2,i),300,10*Math.pow(2,i),0,Math.PI*2,true);
// context.arc(10*i,100,10*i,0,Math.PI*2,true);
context.stroke();
context.closePath();
};

不加的情况下

context.lineCap = "round'; 线帽

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(20,20); ctx.lineTo(20,200); ctx.stroke()

其他参数 context.lineCap="butt|round|square";
贝塞尔曲线 quadraticCurveTo（kx,ky,ex,ey） 二次贝塞尔曲线，一个控制点，一个终点 bezierCurveTo（kx1，ky1，kx2，ky2，ex，ey） 三次贝塞尔曲线， 两个控制点 一个终点 context.clearRect（x,y,w,h）; 清画布

产生随机贝塞尔曲线

<script>
var cnvas = document.getElementById("cnvas');
var context = cnvas.getContext('2d');
context.fillStyle = 'rgba(0,0,0,1)';
context.fillRect(0,0,800,400);
// 三个控制点 每一个点都需要两个值 这两个点随机
// 每条线 都需要颜色(rgba) 三个颜色随机
// setInterval(fun,1000);
// bezierCurveTo
// Math.round() Math.random()
//
setInterval(draw,1000);
function draw () {
var kx1 = Math.round(Math.random()*700);
var ky1 = Math.round(Math.random()*350);
var kx2 = Math.round(Math.random()*750);
var ky2 = Math.round(Math.random()*400);
var ex = Math.round(Math.random()*750);
var ey = Math.round(Math.random()*400);
var colorR = Math.round(Math.random()*255);
var colorG = Math.round(Math.random()*255);
var colorB = Math.round(Math.random()*255);
context.shadowOffsetX = 4; // 阴影Y轴偏移
context.shadowOffsetY = 5; // 阴影X轴偏移
context.shadowBlur = 6; // 模糊尺寸
context.shadowColor = "rgba("+colorG+", "+colorB+", "+colorR+", 0.4)"; // 颜色
context.fillStyle = 'rgba(0,0,0,1)';
context.fillRect(0,0,800,400);
context.beginPath();
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0,0,800,400);
context.bezierCurveTo(kx1,ky1,kx2,ky2,ex,ey);
context.lineWidth = 4;
context.strokeStyle = "rgb("+colorR+","+colorG+","+colorB+")";
context.stroke();
context.closePath();
}
</script>

绘制文字：