前言：
这节课主要学习HTML5中新增的画布(canvas)。
1.canvas基本认识
作用：canvas是HTML5给出的一个可以展示绘图(可以用JavaScript控制图的内容)内容的标签。
场景：
游戏
可视化数据(重点) 根据数据，绘制出相应的图表
banner广告
多媒体
未来
模拟仿真 threejs.org（canvas派生出来的）
远程操作
图形编辑
2.canvas基本使用
1.canvas的宽、高属性：
canvas标签默认占据300 * 150的区域。
设置宽、高：
第一种：行内式设置，相当于增加了canvas画布的像素点。(推荐方式)
第二种：内嵌式设置，只是将像素扩大了，并没有增加像素点，这样图形会变虚。
注意事项：canvas的宽、高不带单位。
2.操作步骤
获取canvas标签
var cas = document.getElementById("cas");
获取2d绘图画笔：
var ctx = cas.getContext("2d");
开始描点：
ctx.moveTo(100, 100); //把笔放到这个位置(绘制的起始点)
ctx.lineTo(200, 100); //绘制直线到什么位置(绘制的终点)
开始绘图：
ctx.stroke(); //描边绘图，可以看到效果
demo示例：
<head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????canvas { ???????????border:1px solid black; ???????} ???</style></head><body> ???<canvas width="600" height="400" id="cas"></canvas></body><script> ???var cas = document.getElementById( ‘cas‘ ); ???var ctx = cas.getContext( ‘2d‘ ); ???ctx.moveTo( 100, 100 ); // 把笔放在那里 ???ctx.lineTo( 200, 100 ); // 从刚才的位置, 绘制到哪里 ???ctx.stroke(); ?// 描边绘图, 可以看到效果</script> 3.常用方法和属性：
moveTo(); 设置绘图的起始点
lineTo(); 从起始点绘制直线到x, y。
stroke(); 将描好的边连接，形成封闭的图形。
fill(); 调用fill方法会将所有的点连接起来，并构成一个封闭的图形结构
如果所有的描点没有构成封闭结构，也会将开始的起点与最终的点连接起来，构成一个闭合的图像，并且填充
lineWidth = 值; 改变画笔的粗细
如果是奇数，线宽会+1变成偶数，绘制结果：线宽的上下各会有1px的虚影。
如果是偶数，上下就不会有虚影。
strokeStyle = "颜色"，设置画笔的颜色
lineDashOffset = 数字 表示线起始位置距画布边框距离
当数字为"正"时，表示虚线向左移动。
当数字为"负"时，表示虚线向右移动。
setLineDash(数组);
数组中的数字交替表示实线和间隙的长度。
closePath();用于闭合图形， 会对终点处理。
beginPath()开辟新的路径
getLineDash();获取线形的参数设置
fillStyle(); 设置某块区域的填充颜色。
3.canvas案例演示
1.绘制虚线(step=10)
<head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????canvas { ???????????border:1px solid black; ???????} ???</style></head><body> ???<canvas width="600" height="400" id="cas"></canvas></body><script> ???// 绘制虚线 ???// 从 (100,100) 绘制到 右下角 (500, 100) ???// 获取canvas元素 ???var cas = document.getElementById( ‘cas‘ ); ???// 获取2d画笔 ???var ctx = cas.getContext( ‘2d‘ ); ???// 设置间隙为10，起始x坐标为100 ???var step = 10,start = 100; ???// 一直绘制下去, 当 moveTo 的 x 超过 500 的时候停下来 ???while ( true ) { ???????if ( start >= 500 ) break; ???????// 绘制虚线的 实线部分 ???????ctx.moveTo( start, 100 ); ???????ctx.lineTo( start+=step, 100 ) ???????// 绘制间隔部分 ???????start+=step; ???} ???ctx.stroke();</script>2.绘制倾斜虚线
<head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????canvas { ???????????border:1px solid black; ???????} ???</style></head><body> ???<canvas width="600" height="400" id="cas"></canvas></body><script> ???// 从 (0,0) 绘制到 右下角 (600, 400) ???var cas = document.getElementById( ‘cas‘ ); ???var ctx = cas.getContext( ‘2d‘ ); ???//使stepY和stepX不是等比例变化 ???var stepX = 5, stepY = stepX * 2 / 3,startX = 0, startY = 0; ???while ( true ) { ???????if ( startX >= 600 || startY >= 400 ) break; ???????// 绘制虚线的 实线部分 ???????ctx.moveTo( startX, startY ); ???????ctx.lineTo( startX+=stepX, startY+=stepY ); ???????// 绘制空白部分 ???????startX+=stepX; ???????startY+=stepY; ???} ???ctx.stroke();</script>3.绘制矩形、梯形、三角形
<head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????canvas { ???????????border:1px solid black; ???????} ???</style></head><body> ???<canvas width="600" height="400" id="cas"></canvas></body><script> ???var cas = document.getElementById( ‘cas‘ ); ???var ctx = cas.getContext( ‘2d‘ ); ???// 绘制矩形 ???ctx.moveTo( 50, 100 ); ???ctx.lineTo( 50 + 100, 100 ); ???ctx.lineTo( 50 + 100, 100 + 100 ); ???ctx.lineTo( 50, 100 + 100 ); ???ctx.lineTo( 50, 100 ); ???// 绘制三角形 ???ctx.moveTo( 200, 100 ); ???ctx.lineTo( 200, 200 ); ???ctx.lineTo( 300, 200 ); ???ctx.lineTo( 200, 100 ); ???// 绘制梯形 ???ctx.moveTo( 350, 100 ); ???ctx.lineTo( 350, 200 ); ???ctx.lineTo( 450, 200 ); ???ctx.lineTo( 400, 100 ); ???ctx.lineTo( 350, 100 ); ???ctx.stroke();</script>4.fil方法演示
<head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????canvas { ???????????border:1px solid black; ???????} ???</style></head><body> ???<canvas width="600" height="400" id="cas"></canvas></body><script> ???var cas = document.getElementById( ‘cas‘ ); ???var ctx = cas.getContext( ‘2d‘ ); ???// fill 替代 stroke方法 ???ctx.moveTo( 100, 100 ); ???ctx.lineTo( 200, 100 ); ???ctx.lineTo( 200, 200 ); ???ctx.fill();</script>5.closePath方法演示
<head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????canvas { ???????????border:1px solid black; ???????} ???</style></head><body> ???<canvas width="600" height="400" id="cas"></canvas></body><script> ???var cas = document.getElementById( ‘cas‘ ); ???var ctx = cas.getContext( ‘2d‘ ); ???//设置线宽为3 ???ctx.lineWidth = 3; ???//设置线颜色为red ???ctx.strokeStyle = "red"; ???ctx.moveTo( 100, 50 ); ???ctx.lineTo( 200, 50 ); ???ctx.lineTo( 200, 150 ); ???ctx.lineTo( 100, 150 ); ???// 当绘图没有封闭时， closePath()会自动将起点和终点连接闭合。 ???ctx.closePath(); ???ctx.stroke();</script>6.beginPath方法演示
<head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????canvas { ???????????border:1px solid black; ???????} ???</style></head><body> ???<canvas width="600" height="400" id="cas"></canvas></body><script> ???var cas = document.getElementById( ‘cas‘ ); ???var ctx = cas.getContext( ‘2d‘ ); ???// 首先绘制一个描边的矩形 ???ctx.moveTo( 100, 80 ); ???ctx.lineTo( 400, 80 ); ???ctx.lineTo( 400, 180 ); ???ctx.lineTo( 100, 180 ); ???ctx.closePath(); ???ctx.stroke(); ???// 如果不使用beginPath()，上面的矩形会被再绘制一次结果就会比之前加粗 ???ctx.beginPath(); ???ctx.moveTo( 100, 200 ); ???ctx.lineTo( 400, 200 ); ???ctx.lineTo( 400, 300 ); ???ctx.lineTo( 100, 300 ); ???ctx.closePath(); ???ctx.stroke();</script>7.setLineDash(arr)方法演示
<head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????canvas { ???????????border:1px solid black; ???????} ???</style></head><body> ???<canvas width="600" height="400" id="cas"></canvas></body><script> ???var cas = document.getElementById( ‘cas‘ ); ???var ctx = cas.getContext( ‘2d‘ ); ???ctx.moveTo( 100, 100 ); ???ctx.lineTo( 400, 100 ); ???// 表示先画10像素的的实线，再间隔5像素的空白 ???ctx.setLineDash( [ 10, 5] ); ???ctx.stroke();</script>8.综合练习坐标系
<head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????canvas { ???????????border:1px solid black; ???????} ???</style></head><body> ???<canvas width="600" height="400" id="cas"></canvas></body><script> ???var cas = document.getElementById( ‘cas‘ ); ???var ctx = cas.getContext( ‘2d‘ ); ???var paddingTop = 50, paddingLeft = 50, paddingBottom = 50, paddingRight = 50; ???var arrowHeight = 20,arrowWidth = 10; ???var ?x0 = paddingLeft, y0 = cas.height - paddingBottom; ???// 首先绘制坐标轴线 ???ctx.moveTo( x0, paddingTop ); ???ctx.lineTo( x0, y0 ); ???ctx.lineTo( cas.width - paddingRight, y0 ); ???ctx.stroke(); ???// 绘制箭头 ???ctx.beginPath(); ???ctx.moveTo( cas.width - paddingRight, y0 ); ???ctx.lineTo( cas.width - paddingRight - arrowHeight, y0 - arrowWidth * .5 ); ???ctx.lineTo( cas.width - paddingRight - arrowHeight * .5, y0 ); ???ctx.lineTo( cas.width - paddingRight - arrowHeight, y0 + arrowWidth * .5 ); ???ctx.closePath(); ???ctx.moveTo( paddingLeft, paddingTop ); ???ctx.lineTo( paddingLeft - arrowWidth * .5, paddingTop + arrowHeight ); ???ctx.lineTo( paddingLeft, paddingTop + arrowHeight * .5 ); ???ctx.lineTo( paddingLeft + arrowWidth * .5, paddingTop + arrowHeight ); ???ctx.closePath(); ???ctx.fill(); ???// 下面绘制点 ???ctx.beginPath(); ???// // 绘制一个点在坐标轴的中间 ???var width = cas.width - paddingRight - paddingLeft - arrowHeight, ???????height = cas.height - paddingTop - paddingBottom - arrowHeight; ???var x = width * .5, ???????y = height * .5; ???// 坐标变换 ???x = x0 + x; ???y = y0 - y; ???// 绘制一个红色的矩形 ???var pointWidth = 8; ???ctx.fillStyle = ‘red‘; ???ctx.moveTo( x - pointWidth * .5, y - pointWidth / 2 ); ???ctx.lineTo( x + pointWidth * .5, y - pointWidth / 2 ); ???ctx.lineTo( x + pointWidth * .5, y + pointWidth / 2 ); ???ctx.lineTo( x - pointWidth * .5, y + pointWidth / 2 ); ???ctx.closePath(); ???ctx.fill();</script>9.绘制直线的方法封装
<head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????canvas { ???????????border:1px solid black; ???????} ???</style></head><body> ???<canvas width="600" height="400" id="cas"></canvas></body><script> ???var cas = document.getElementById( ‘cas‘ ); ???var ctx = cas.getContext( ‘2d‘ ); ???function Line( config ) { ???????// 必须提供的属性 ???????this.ctx = config.ctx; ???????this.x0 = config.x0; ???????this.y0 = config.y0; ???????this.x1 = config.x1; ???????this.y1 = config.y1; ???????// 选择提供 ???????this.strokeStyle = config.strokeStyle; ???????this.lineWidth = config.lineWidth; ???} ???Line.prototype = { ???????constructor: Line, ???????stroke: function () { ???????????// 封装绘制过程即可 ???????????this.ctx.moveTo( this.x0, this.y0 ); ???????????this.ctx.lineTo( this.x1, this.y1 ); ???????????if ( this.strokeStyle ) { ???????????????this.ctx.strokeStyle = this.strokeStyle; ???????????} ???????????if ( this.lineWidth ) { ???????????????this.ctx.lineWidth = this.lineWidth; ???????????} ???????????this.ctx.stroke(); ???????} ???}; ???var line = new Line( { ???????ctx: ctx, ???????x0: 100, ???????y0: 100, ???????x1: 400, ???????y1: 100, ???????strokeStyle:‘red‘, ???????lineWidth: 5 ???}); ???line.stroke();</script>HTML5--新增元素canvas一(8.1)
原文地址：https://www.cnblogs.com/diweikang/p/8687453.html