正文
HTML5_canvas 画布
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<canvas></canvas> 画布
-
<canvas id="my_canvas" width="400" height="400">
您的浏览器不支持 canvas，建议更换浏览器
</canvas>
用于在网页上绘制图形
canvas 是一个 inline-block 行内块元素
canvas 默认宽高：width: 300px; height: 150px;
canvas 不能使用 css 设置 width 和 height， 会导致后面绘画发生变形
canvas 必须使用标签上的属性设置 width 和 height
- 基本使用
-
获取画布
-
var myCanvas = document.getElementById("my_canvas");
-
-
获取画笔（也叫“获取上下文”）
-
var painting = myCanvas.getContext("2d");
-
-
画矩形
-
-
填充矩形
- 看到这个 fill 一定和 填充 有关系
- 看到这个 rect 一定是一个 矩形
-
painting.fillRect(0, 0, 100, 100); // 或者
padding.rect(0, 0, 100, 100);
padding.fill(); - 填充颜色
-
padding.fillStyle = "red";
padding.fillStyle = "rgba(255, 255, 0, 0.4)";
-
描边矩形
- 看到这个 stroke 一定和 描边 有关系
-
painting.strokeRect(100, 100, 100, 100); // 或者
padding.rect(100, 100, 100, 100);
padding.stroke(); -
设置线描边的颜色
-
padding.strikeStyle = "yellow";
-
-
设置线的宽度
-
padding.lineWidth = 20;
padding.lineWidth = "10"; - 在原有盒子的基础上，描边 会 里外均等分布
-
-
填充矩形
-
参数1，参数2
- 矩形的 左上角 坐标
-
参数3，参数4
- 矩形的 width 和 height
-
-
再开始绘制新图形
（类似绘画的 "抬笔" 动作）
-
padding.beginPath();
-
- 橡皮擦
-
矩形橡皮擦
-
painting.clearRect(0, 0, 100, 100);
-
清除整个画布
-
padding.clearRect(0, 0, myCanvas.width, myCanvas.height);
-
-
- 画 线段
-
画笔移动到画布
起始点
-
painting.moveTo(100, 100);
-
-
设置画笔的
终点
-
padding.lineTo(200, 100);
/**** 除了 .fillRect 和 .strokeRect
其他绘制，都必须加 .fill(),或者 .stroke()
才能看见图形
****/
painting.stroke(); // 线宽lineWidth 总是 线两侧均等分配
-
-
设置
线段两端
风格
-
painting.lineCap = "butt"; // 默认值，方形结束
painting.lineCap = "round"; // 圆形结束
painting.lineCap = "square"; // 方形结束，但是当？？？？？？？？？？？？？？
-
-
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head> <body> <p>三种不同的结束线:</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas> <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); ctx.beginPath();
ctx.lineWidth=10;
ctx.lineCap="butt";
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke(); ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,40);
ctx.lineTo(200,40);
ctx.stroke(); ctx.beginPath();
ctx.lineCap="square";
ctx.moveTo(20,60);
ctx.lineTo(200,60);
ctx.stroke();
</script> </body>
</html>
-
连续线段 绘制
-
painting.moveTo(100, 100); // 起点 painting.lineTo(100, 200);
painting.lineTo(200, 200); // 线段连接处 样式设置
painting.lineJoin = "bevel"; // 斜角 默认值
painting.lineJoin = "round"; // 圆角
painting.lineJoin = "miter"; // 直角 // 手动 绘制三角形 不好，会在连接处缺一个角
painting.lineTo(100, 100); // 手动连接 终点，起点，缺点： 会在连接处有一个缺角，且不会被 lineJoin() 设置样式
// 闭合路径 绘制三角形 一定要使用这个函数，来连接 终点，起点，且会所有角都会被 lineJoin() 设置到样式
painting.closePath();
painting.fill(); // 有填充
painting.stroke(); // 同时描边
-
注意： 从 获取画板 开始，到最终 .stroke() 临摹，只要有一个错误，结果就不会显示。console 控制台并不会报错
-
pen.save() 和 pen.restore()
- 之间的样式被包裹，类似函数变量作用域
练习1.
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <script type="text/javascript" src="./js/kjfFunctions.js"></script>
<script type="text/javascript" src="./js/index.js"></script> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
text-align: center;
}
</style>
</head> <body> <canvas id="my_canvas" width="600" height="600">
您的浏览器不支持 canvas，建议更新或者更换浏览器。
</canvas> <!-- javascript 代码 -->
<script type="text/javascript">
// 1. 获取画板
var myCanvas = document.getElementById("my_canvas"); /* 不能 使用 css 设置 canvas 的 width 和 height */
// 给画布一个颜色
myCanvas.style.backgroundColor = "#eee"; // 2. 获取画笔
var pen = myCanvas.getContext("2d"); // 画一个填充矩形
pen.beginPath();
pen.fillStyle = 'red'; // 一定要在绘制之前设置好 颜色
pen.fillRect(100, 100, 200, 200); // 画一个描边矩形
pen.beginPath(); pen.strokeStyle = 'blue'; // 一定要在绘制之前设置好 颜色
pen.lineWidth = 20; // 一定要在绘制之前设置好 笔宽 pen.strokeRect(150, 150, 100, 100); // 宽高从 线的中线开始算
</script>
</body>
</html>
练习2.
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <script type="text/javascript" src="./js/kjfFunctions.js"></script>
<script type="text/javascript" src="./js/index.js"></script> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
text-align: center;
}
</style>
</head> <body> <canvas id="my_canvas" width="600" height="600">
您的浏览器不支持 canvas，建议更新或者更换浏览器。
</canvas> <!-- javascript 代码 -->
<script type="text/javascript">
// 1. 获取画板
var myCanvas = document.getElementById("my_canvas"); /* 不能 使用 css 设置 canvas 的 width 和 height */
// 给画布一个颜色
myCanvas.style.backgroundColor = "#eee"; // 2. 获取画笔
var pen = myCanvas.getContext("2d"); // 3. 一次绘画的开始
pen.beginPath(); // 4. 一定要在绘制之前 设置好（可以在 pen.beginPath()之前设置）
pen.fillStyle = 'red'; // 填充的颜色
pen.strokeStyle = 'blue'; // 笔的颜色
pen.lineWidth = 4; // 笔宽
pen.lineCap = "round"; // 圆形结束
pen.lineJoin = "round"; // 圆角 // 5. 终于可以开始画了
pen.moveTo(100, 100); pen.lineTo(100, 200);
pen.lineTo(150, 250);
pen.closePath(); // 画布 总是显示 .beginPath() 和 .closePath() 之间的绘画____所以，需要的话，要成对出现
pen.beginPath();
pen.moveTo(300, 300);
pen.lineTo(500, 300);
pen.lineTo(500, 500);
pen.lineTo(300, 500);
pen.closePath(); // 闭合路径
/**** 6. 一定要记得的 .stroke()临摹 ****/
pen.stroke(); </script>
</body>
</html>
签名，DIY 画板 案例
-
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <script type="text/javascript" src="./js/kjfFunctions.js"></script>
<script type="text/javascript" src="./js/index.js"></script> <style type="text/css">
/**** btns ****/
#btns button {
padding: 0 10px;
background-color: #565628;
width: 116px;
height: 30px;
color: #c0cea7;
font-size: 18px;
line-height: 30px;
text-align: center;
outline: none;
border: 0 none;
} #btns button:hover {
color: #bda0f1;
font-size: 24px;
} #btns button:active {
color: #bda0f1;
font-size: 18px;
} body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
} #wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} #wrap #btns{
width: 600px;
height: 100px;
display: flex;
justify-content: space-around;
align-items: space-around;
}
</style>
</head> <body> <div id="wrap">
<canvas id="my_canvas" width="600" height="600">
您的浏览器不支持 canvas，建议更新或者更换浏览器。
</canvas>
<div id="btns">
<button id="eraser">橡皮擦</button>
<button id="the_black">画笔</button>
<input id="chg_color" type="color" name="penColor" />
<button id="add_width">笔粗</button>
<button id="dec_width">笔细</button>
</div>
</div> <!-- javascript 代码 -->
<script type="text/javascript">
// 1. 获取画板
var myCanvas = document.getElementById("my_canvas"); /* 不能 使用 css 设置 canvas 的 width 和 height */
// 给画布一个颜色
myCanvas.style.backgroundColor = "#eee"; // 2. 获取画笔
var pen = myCanvas.getContext("2d"); var chgColor = document.getElementById("chg_color");
// 3. 一定要在绘制之前 设置好
pen.fillStyle = 'red'; // 填充的颜色
pen.strokeStyle = chgColor.value; // 笔的颜色
pen.lineWidth = 4; // 笔宽
pen.lineCap = "round"; // 圆形结束
pen.lineJoin = "round"; // 圆角 chgColor.addEventListener("change", watchColorPicker, false); function watchColorPicker(event) {
pen.strokeStyle = chgColor.value;
}; var eraser = document.getElementById("eraser");
eraser.onclick = function(){
pen.strokeStyle = myCanvas.style.backgroundColor;
}; var theBlack = document.getElementById("the_black");
theBlack.onclick = function(){
pen.strokeStyle = chgColor.value;
}; var add_width = document.getElementById("add_width");
add_width.onclick = function(){
pen.lineWidth++;
}; var dec_width = document.getElementById("dec_width");
dec_width.onclick = function(){
pen.lineWidth--;
if(pen.lineWidth <= 0){
pen.lineWidth = 1;
}
}; myCanvas.onmousedown = function(e){
e = e || window.event; myCanvas.setCapture && myCanvas.setCapture(); var canvasX = myCanvas.getBoundingClientRect().left;
var canvasY = myCanvas.getBoundingClientRect().top; // 4. 一次绘画的开始
pen.beginPath(); pen.moveTo(e.clientX-canvasX, e.clientY-canvasY); myCanvas.onmousemove = function(e){
e = e || window.event; pen.lineTo(e.clientX-canvasX, e.clientY-canvasY);
/**** 5. 一定要记得的 临摹 ****/
pen.stroke();
}; myCanvas.onmouseup = function(){ myCanvas.onmousemove = null;
myCanvas.onmouseup = null;
myCanvas.releaseCapture && myCanvas.releaseCapture();
}; e.preventDefault && e.preventDefault();
return false;
}; </script>
</body>
</html>
五角星 案例
- 画布原点(0, 0) 位移 painting.translate(100, 100);
-
-
-
-
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <script type="text/javascript" src="./js/kjfFunctions.js"></script>
<script type="text/javascript" src="./js/index.js"></script> <style type="text/css">
/**** btns ****/
#btns button {
padding: 0 10px;
background-color: #565628;
width: 116px;
height: 30px;
color: #c0cea7;
font-size: 18px;
line-height: 30px;
text-align: center;
outline: none;
border: 0 none;
} #btns button:hover {
color: #bda0f1;
font-size: 24px;
} #btns button:active {
color: #bda0f1;
font-size: 18px;
} body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
} #wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} #wrap #btns{
width: 600px;
height: 100px;
display: flex;
justify-content: space-around;
align-items: space-around;
}
</style>
</head> <body> <div id="wrap">
<canvas id="my_canvas" width="1000" height="900">
您的浏览器不支持 canvas，建议更新或者更换浏览器。
</canvas>
</div> <!-- javascript 代码 -->
<script type="text/javascript">
// 1. 获取画板
var myCanvas = document.getElementById("my_canvas"); /* 不能 使用 css 设置 canvas 的 width 和 height */
// 给画布一个颜色
myCanvas.style.backgroundColor = "#eee"; // 2. 获取画笔
var pen = myCanvas.getContext("2d"); // 3. 一定要在绘制之前 设置好
pen.fillStyle = 'olive'; // 填充的颜色
pen.strokeStyle = "blue"; // 笔的颜色
pen.lineWidth = 4; // 笔宽
pen.lineCap = "round"; // 圆形结束
pen.lineJoin = "round"; // 圆角 // 4. 一次绘画的开始
pen.beginPath(); drawStar(pen, 300, 300, 100,40); pen.closePath(); /* 5. 一定要记得的 临摹 */
pen.stroke(); /**** 封装函数 ****/
function drawStar(pen, centerX, centerY, R, r){
pen.beginPath(centerX, centerY+R);
pen.moveTo(centerX+R*Math.cos(18*Math.PI/180),centerY-R*Math.sin(18*Math.PI/180)); for(var i=0;i<5;i++){
pen.lineTo(centerX+R*Math.cos((72*i+18)*Math.PI/180),centerY-R*Math.sin((72*i+18)*Math.PI/180))
pen.lineTo(centerX+r*Math.cos((72*i+54)*Math.PI/180),centerY-r*Math.sin((72*i+54)*Math.PI/180))
};
};
</script>
</body>
</html>
圆形 绘制
- painting.arc(圆形点, 弧度, 起始弧度, 终点弧度, false 顺时针);
- painting.arc(200, 200, 100, 0, 2*Math.PI);
- painting.arc(200, 200, 100, 0, 0.5*Math.PI); // 顺时针 画 1/4 个圆弧
-
painting.arc(200, 200, 100, 0, 0.5*Math.PI, true); // 逆时针 画 3/4 个圆弧
-
圆弧 绘制
