维基百科摘要：
画布（canvas）元素是HTML5的一部分，允許脚本语言（scripting languages）動態渲染點陣圖像。Canvas是由HTML代碼配合高度和寬度屬性而定義出的可繪製區域。JavaScript代碼可以訪問該區域，類似於其他通用的二維API，通過一套完整的繪圖函數來動態生成圖形。一些可能的用途，包括使用Canvas構造圖形，動畫，遊戲和圖片。如果您要在HTML中加入canvas元素，请将以下代码加入到部分中：
一、web前端的绘图技术
统计图表 echats
实时走势图 canvas
在线画图板 魔猴
HTML5游戏 three.js
可用绘图技术：
canvas 位图，单位是px 2D图像和图形
svg 矢量图
webGL 3D图像和图形
二、canvas 常规图形绘制
/**
* 页面容器:
* id : "canvas";
* 画布对象 : canvas.getContext('2d');
*/
<canvas width="600" height="400" id="canvas"></canvas> //
var canvas = document.getElementById("canvas");
//获取画布对象（画笔） Context上下文 content内容
var ctx= canvas.getContext('2d');
// 清除画布
cxt.clearRect(0, 0, x, y);
1.矩形
ctx.fillRect(x,y,w,h); // 实心矩形
ctx.fillStyle = "#FFF";
ctx.strokeRect(x,y,w,h); // 空心矩形
ctx.strokStyle = "#FFF";
ctx.linewidth = 10; // 线条宽度
2.线性渐变
// 创建一个渐变对象 ctx.createLinearGradient(x0,y0,x1,y1)，
var grad = cxt.createLinearGradient(0,0,400,300);
// 设置渐变颜色及偏移度
grad.addColorStop(0,"red");
grad.addColorStop(0.3,"yellow");
grad.addColorStop(0.6,"pink");
grad.addColorStop(1,"blue");
ctx.fillStyle = grad;
ctx.fillRect(0,0,400,300);
3.扇形渐变
// 创建渐变对象：ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)
var grad = cxt.createRadialGradient(150,150,0,150,150,200);
grad.addColorStop(0,"red");
grad.addColorStop(0.5,"blue");
grad.addColorStop("1","yellow");
ctx.fillStyle = grad;
ctx.fillRect(0,0,400,400);
4.绘制文字
// 设置文字的font属性
ctx.font = "bold 48px 宋体";
// 绘制文字
// context.fillText(text,x,y,maxWidth);
ctx.strokeRect(100,100,200,200)
ctx.fillText("TXT_01",100,100,50);
ctx.strokeText("TXT_02",200,200);
5.绘制文字的水平对齐
// 可以设置文字对齐
ctx.textAlign = "center";
ctx.textAlign = "right";
ctx.textAlign = "left";
ctx.textAlign = "end";
ctx.textAlign = "start";
ctx.textBaseline = "alphabetic"; // 文本基线
6.路径绘制
// 1.创建路径
ctx.beginPath();
// 2.绘制形状
ctx.rect(10,10,100,100);
// 3.绘制
ctx.stroke(); // context.fill();
// 4.关闭当前路径
ctx.closePath();
/* 路径绘图 */
ctx.beginPath(); // 开始
ctx.moveTo(10,10); // 起始点
ctx.lineTo(100,10); // 转折点
ctx.lineTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(300,200);
ctx.closePath(); // 结束
ctx.lineWidth = 2; // 线条宽度
ctx.fill() // 填充
7.路径画圆
// ctx.arc(圆心x, 圆心y, 半径r, 起始角度位置, 重点角度位置, counterclockwise);
// counterclockwise : 可选参数，默认顺时针绘制，false;
ctx.beginPath();
ctx.arc(280,60,50,0,Math.PI * 2);
ctx.closePath();
ctx.stroke()
三、实例
Q1：画内块移动
（1）效果展示
（2）详细代码
<canvas width="600" height="400" id="canv"></canvas>
<script>
var canv = document.getElementById("canv");
var cxt = canv.getContext("2d");
cxt.fillStyle = "#D8DEE9";
var timer = null;
var x = 0, x_01 = 0, y_01 = 0;
clearInterval(timer);
timer = setInterval(move, 20);
function move(){
cxt.clearRect(0, 0, 600, 400);
cxt.fillRect(500,0,100,80);
cxt.fillRect(500,320,100,80);
cxt.clearRect(x-1, 160, 100, 80);
cxt.fillRect(x, 160, 100, 80);
cxt.clearRect(x_01-1, y_01-1, 100, 80);
cxt.fillRect(x_01, y_01, 100, 80);
x++; x_01++; y_01++;
if(x_01 > 500){
x = 0; x_01 = 0; y_01 = 0;
}
}
</script>
Q2：渐变色
（1）效果展示
（2）详细代码
<canvas width="600" height="400" id="canv01"></canvas>
<script>
var canv_01 = document.getElementById("canv01");
var cxt_01 = canv_01.getContext("2d");
var ga = cxt_01.createLinearGradient(0, 0, 600, 400);
ga.addColorStop(0, "#DC143C");
ga.addColorStop(0.25, "#FFA500");
ga.addColorStop(0.3, "#FFD700");
ga.addColorStop(0.4, "#ADFF2F");
ga.addColorStop(0.5, "#00FF7F");
ga.addColorStop(0.6, "#00FFFF");
ga.addColorStop(0.8, "#1E90FF");
ga.addColorStop(1, "#9400D3");
cxt_01.fillStyle = ga;
cxt_01.fillRect(0, 0, 600, 400);
</script>
Q3：弹幕
（1）效果展示
（2）详细代码
<canvas width="1500" height="400" id="canv02"></canvas>
<script>
var canv_02 = document.getElementById("canv02");
var ctx_02 = canv_02.getContext("2d");
ctx_02.strokeStyle = "blue";
ctx_02.moveTo(500,300);
ctx_02.lineTo(500,500);
ctx_02.stroke();
// ctx_02.textAlign = "right";
ctx_02.strokeStyle = ga;
ctx_02.font = "40px 华文行楷";
var timeR = null;
var tmp = 1500;
var item = 0;
clearInterval(timeR);
timeR = setInterval(move_text, 1);
function move_text(){
ctx_02.clearRect(0,0,1500,400)
if(tmp >= 0){
tmp--;
ctx_02.strokeText("Hellow Wold HEELLOW WORD",tmp,200);
if(tmp == 0) item = 0;
} else if(item <= 1040){
item++;
ctx_02.strokeText("Hellow Wold HEELLOW WORD",item,200);
if(item == 1040) tmp = 1040;
}
}
</script>
Q4：像素人
（1）效果展示
（2）详细代码
<canvas width="1500" height="400" id="canv03"></canvas>
<script>
var canv03 = document.getElementById("canv03");
var ctx_03 = canv03.getContext("2d");
var statusA = true;
var tmp_n = 0;
var timer_00 = null;
clearInterval(timer_00);
timer_00 = setInterval(eat_fun, 200);
function eat_fun(){
ctx_03.clearRect(0,0,1500,400); // 清空画布
tmp_n += 10;
ctx_03.beginPath();
ctx_03.fillStyle = "#F3F87D";
// 状态判断
if(statusA){
open_fun();
}else{
close_fun();
}
ctx_03.fillStyle = "#F3F87D";
ctx_03.fill();
ctx_03.beginPath();
ctx_03.fillStyle = "#343D46";
ctx_03.arc(tmp_n, 50, 10, 0, Math.PI * 2);
ctx_03.lineWidth = 8;
// 👁 判断
if (!statusA) {
ctx_03.stroke();
} else{
ctx_03.fill();
ctx_03.beginPath();
ctx_03.fillStyle = "#000";
ctx_03.moveTo(tmp_n,100);
ctx_03.lineTo(tmp_n+100,100);
ctx_03.lineWidth = 1;
ctx_03.stroke();
// console.log(1)
}
if(tmp_n >= 1600) tmp_n = 0;
}
// 开
function open_fun(){
ctx_03.arc(tmp_n, 100, 100, Math.PI/4, Math.PI * 7/4);
ctx_03.lineTo(tmp_n,100);
statusA = false;
}
// 关
function close_fun(){
ctx_03.arc(tmp_n, 100, 100, 0, Math.PI * 2);
statusA = true;
}
</script>
Q5：阴阳八卦
（1）效果展示
（2）详细代码
<canvas width="600" height="600" id="canv04"></canvas>
<script>
var canv04 = document.getElementById("canv04");
var ctx_04 = canv04.getContext("2d");
ctx_04.beginPath();
ctx_04.arc(300, 300, 300, Math.PI/2, Math.PI * 3/2);
ctx_04.fillStyle = "#000";
ctx_04.fill();
ctx_04.beginPath();
ctx_04.arc(300, 300, 300, Math.PI * 3/2, Math.PI/2);
ctx_04.fillStyle = "#FFF";
ctx_04.stroke();
ctx_04.beginPath();
ctx_04.arc(300, 450, 150, Math.PI/2, Math.PI * 3/2);
ctx_04.fill();
ctx_04.beginPath();
ctx_04.arc(300, 450, 30, 0, Math.PI * 2);
ctx_04.fillStyle = "#000";
ctx_04.fill();
ctx_04.beginPath();
ctx_04.arc(300, 150, 150, Math.PI * 3/2, Math.PI/2);
ctx_04.fillStyle = "#000";
ctx_04.fill();
ctx_04.beginPath();
ctx_04.arc(300, 150, 30, 0, Math.PI * 2);
ctx_04.fillStyle = "#FFF";
ctx_04.fill();
</script>
~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~
656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
