canvas
基本代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
canvas{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="800" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext("2d"); //準備畫布
ctx.beginPath(); //開啓新路徑，適用於只給當前元素添加屬性
ctx.moveTo(100,100); //這裏的直線起點
ctx.lineTo(200,100); //這裏的直線終點
ctx.strokeStyle="blue"; //描邊的樣式
ctx.lineWidth=5; //線條寬度
ctx.stroke(); //描邊
ctx.beginPath();
ctx.moveTo(100,200.5); //爲何多用0.5？由於canvas的顯示是以刻度算，在瀏覽器的2個px之間，也就是偏移了0.5個px。因此不手動偏移的話，線條看上去會粗一點，顏色偏灰色(線條默認爲黑色,1px寬)
ctx.lineTo(200,200.5);
ctx.lineTo(200,300.5);
ctx.closePath(); //自動閉合，避免閉合處有缺口問題
ctx.strokeStyle="red";
ctx.lineWidth=10;
ctx.stroke();
</script>
</body>
</html>
方法
ctx.beginPath(); //開啓新路徑，適用於只給當前元素添加屬性 ctx.moveTo(100,100); //這裏的直線起點 ctx.lineTo(200,100); //這裏的直線終點 ctx.strokeStyle="blue"; //描邊的樣式 ctx.lineWidth=5; //線條寬度 ctx.stroke(); //描邊 ctx.fill(); //填充 ctx.fillStyle="red"; //填充樣式 ctx.closePath(); //canvas自動閉合，注意和beginPath()沒有任何關係 ctx.lineCap="butt"; //線條末端類型：butt(默認)，round(圓弧)，square(方形) ctx.lineJoin="miter" //拐點樣式：miter(默認，尖的)，round(圓弧)，bevel(平的) ctx.setLineDash([5,10]); //設置線條爲虛線，數組形式，5表示實線長度，10表示間隔長度。若設置[5,10,15],則表示實線5，間隔10，實線15，間隔5，實線10.。。。。 ctx.lineDashOffset=-20; //偏移量 正值往左或上偏移，負值往右或下偏移 var y=ctx.canvas.height //獲取畫布高度 ctx.rect(100,100,200,100) //API：繪製矩形，rect(原點橫座標，原點縱座標，矩形長度，矩形寬度) ctx.strokeRect(100,100,200,100) //繪製有描邊的矩形 ctx.fillRect(100,100,200,100) //繪製有填充的矩形 ctx.clearRect(100,100,200,100) //擦除矩形,也可用於清除指定範圍的畫布 ctx.createLinearGradient(100,100,500,200); //漸變api，createLinearGradient(起點橫座標，起點縱座標，終點橫座標，終點縱座標)（使用方法見下方例子)
知識點
canvas顯示是在瀏覽器2個px之間的，各佔0.5px,好比線條原本默認的是黑色,1px寬。可是因爲其顯示方式，瀏覽器的2個px各佔0.5px,瀏覽器會自動填充滿，所以線條寬看起來就是2px，並且顏色會由於填充而致使變淺，變成灰色。若想精準顯示，則手動調整0.5px即可。css
畫一個三角形，線條寬度5px,會有起始點moveTo()和結束點lineTo()之間沒法徹底閉合的問題，可使用.closePath()方法html
填充的時候遵循「非零環繞規則」
canvascanvas API (https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial)api
繪製弧
/*圓心x，圓心y，弧長，弧起點(0~Math.PI*2之間的任意一點)，弧終點，繪製方向(true爲逆時針,false爲順時針,默認爲false)*/
/*在中心位置畫一個半徑150px的圓弧左下角*/
var w = ctx.canvas.width;
var h = ctx.canvas.height;
ctx.arc(w/2,h/2,150,Math.PI/2,Math.PI,true);
ctx.stroke();
//若要繪製扇形，則須要有起始點和自動閉合
ctx.moveTo(w/2,h/2);
ctx.closePath();
繪製文本
var str="你好啊哈哈哈"; ctx.font = '40px Microsoft YaHei'; //設置字體大小及字體風格 ctx.strokeText(str,x0,y0,maxWidth); // 描邊形式繪製文本，.strokeText(須要繪製的文本，文本繪製起點橫座標(以文本左下角爲基準)，起點縱座標，文本最大寬度(選填)) ctx.fillText(str,x0,y0,maxWidth); //填充形式繪製文本 ctx.textAlign="center" //文本水平對齊方式，center left(或start) right(或end) ctx.textBaseline = 'middle'; //設置基線，即垂直對齊方式。top,bottom,middle var width = ctx.measureText(str).width; //獲取文本寬度，.measureText(str).width
繪製圖片
/*建立對象*/
var image = new Image();
/*綁定加載完成事件，圖片必須加載完成才能夠調用*/
image.onload = function () {
/*實現圖片繪製*/
/*繪製圖片的三種方式*/
/*3參數*/
/*繪製在畫布上的座標 x y*/
ctx.drawImage(image,100,100);
/*5個參數*/
/*圖片對象*/
/*繪製在畫布上的座標 x y*/
/*是圖片的大小：寬,高(不是裁剪,是縮放)*/
ctx.drawImage(image,100,100,100,100);
/*9個參數*/ //此方法是在一個原始圖片上截圖而後將截圖展現在畫布上
/*圖片對象*/
/*圖片上定位的座標 x y */
/*在圖片上截取多大的區域 w h*/
/*繪製在畫布上的座標 x y*/
/*是圖片的大小：寬,高(不是裁剪,是縮放)*/
ctx.drawImage(image,400,400,400,400,200,200,100,100);
};
/*設置圖片路徑*/
image.src = 'image/02.jpg';
座標轉換：平移，縮放，旋轉(全部的轉換對象都是座標，而非圖形)
ctx.translate(100,100); ctx.scale(0.5,1); ctx.rotate(Math.PI/6);
自動旋轉的矩形
var startAngle = 0;
ctx.translate(150,150);
setInterval(function () {
startAngle += Math.PI/180;
ctx.rotate(startAngle);
ctx.strokeRect(-50,-50,100,100);
},500);
線條顏色漸變（由每一個點的變化引發總體線的變化）
ctx.lineWidth = 30;
for (var i = 0; i < 255; i++) {
ctx.beginPath();
ctx.moveTo(100+i-1,100);
ctx.lineTo(100+i,100);
ctx.strokeStyle = 'rgb('+i+',0,0)';
ctx.stroke();
}
矩形漸變
var ctx = document.querySelector('canvas').getContext('2d');
var change = ctx.createLinearGradient(100,100,500,200); //漸變api，ctx.createLinerGradient(起點橫座標，起點縱座標，終點橫座標，終點縱座標)
change.addColorStop(0,'pink'); //起點顏色
change.addColorStop(0.5,'red'); //0.5處顏色
change.addColorStop(1,'blue'); //終點顏色
ctx.fillStyle = change;
ctx.fillRect(100,100,400,100);
繪製折線圖例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
/*1.構造函數*/
var LineChart = function (ctx) {
/*獲取繪圖工具*/
this.ctx = ctx || document.querySelector('canvas').getContext('2d');
/*畫布的大小*/
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
/*網格的大小*/
this.gridSize = 10;
/*座標系的間距*/
this.space = 20;
/*座標原點*/
this.x0 = this.space;
this.y0 = this.canvasHeight - this.space;
/*箭頭的大小*/
this.arrowSize = 10;
/*繪製點*/
this.dottedSize = 6;
/*點的座標 和數據有關係 數據可視化*/
}
/*2.行爲方法*/
LineChart.prototype.init = function (data) {
this.drawGrid();
this.drawAxis();
this.drawDotted(data);
};
/*繪製網格*/
LineChart.prototype.drawGrid = function () {
/*x方向的線*/
var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);
this.ctx.strokeStyle = '#eee';
for (var i = 0; i <= xLineTotal; i++) {
this.ctx.beginPath();
this.ctx.moveTo(0, i * this.gridSize - 0.5);
this.ctx.lineTo(this.canvasWidth, i * this.gridSize - 0.5);
this.ctx.stroke();
}
/*y方向的線*/
var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);
for (var i = 0; i <= yLineTotal; i++) {
this.ctx.beginPath();
this.ctx.moveTo(i * this.gridSize - 0.5, 0);
this.ctx.lineTo(i * this.gridSize - 0.5, this.canvasHeight);
this.ctx.stroke();
}
};
/*繪製座標系*/
LineChart.prototype.drawAxis = function () {
/*X軸*/
this.ctx.beginPath();
this.ctx.strokeStyle = '#000';
this.ctx.moveTo(this.x0, this.y0);
this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
this.ctx.stroke();
this.ctx.fill();
/*Y軸*/
this.ctx.beginPath();
this.ctx.strokeStyle = '#000';
this.ctx.moveTo(this.x0, this.y0);
this.ctx.lineTo(this.space, this.space);
this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize);
this.ctx.lineTo(this.space - this.arrowSize / 2, this.space + this.arrowSize);
this.ctx.lineTo(this.space, this.space);
this.ctx.stroke();
this.ctx.fill();
};
/*繪製全部點*/
LineChart.prototype.drawDotted = function (data) {
/*1.數據的座標 須要轉換 canvas座標*/
/*2.再進行點的繪製*/
/*3.把線連起來*/
var that = this;
/*記錄當前座標*/
var prevCanvasX = 0;
var prevCanvasY = 0;
data.forEach(function (item, i) {
/* x = 原點的座標 + 數據的座標 */
/* y = 原點的座標 - 數據的座標 */
var canvasX = that.x0 + item.x;
var canvasY = that.y0 - item.y;
/*繪製點*/
that.ctx.beginPath();
that.ctx.moveTo(canvasX - that.dottedSize / 2, canvasY - that.dottedSize / 2);
that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY - that.dottedSize / 2);
that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY + that.dottedSize / 2);
that.ctx.lineTo(canvasX - that.dottedSize / 2, canvasY + that.dottedSize / 2);
that.ctx.closePath();
that.ctx.fill();
/*點的連線*/
/*當時第一個點的時候 起點是 x0 y0*/
/*當時不是第一個點的時候 起點是 上一個點*/
if(i == 0){
that.ctx.beginPath();
that.ctx.moveTo(that.x0,that.y0);
that.ctx.lineTo(canvasX,canvasY);
that.ctx.stroke();
}else{
/*上一個點*/
that.ctx.beginPath();
that.ctx.moveTo(prevCanvasX,prevCanvasY);
that.ctx.lineTo(canvasX,canvasY);
that.ctx.stroke();
}
/*記錄當前的座標，下一次要用*/
prevCanvasX = canvasX;
prevCanvasY = canvasY;
});
};
/*3.初始化*/
var data = [{x: 100,y: 120},{x: 200,y: 160},{x: 300,y: 240},{x: 400,y: 120},{x: 500,y: 80}];
var lineChart = new LineChart();
lineChart.init(data);
</script>
</body>
</html>
繪製餅狀圖例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
border: 1px solid #ccc;
display: block;
margin: 100px auto;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
/*var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');*/
/*1.繪製餅狀態圖*/
/*1.1 根據數據繪製一個餅圖*/
/*1.2 繪製標題 從扇形的弧中心伸出一條線在畫一條橫線在橫線的上面寫上文字標題*/
/*1.3 在畫布的左上角 繪製說明 一個和扇形同樣顏色的矩形 旁邊就是文字說明*/
var PieChart = function (ctx) {
/*繪製工具*/
this.ctx = ctx || document.querySelector('canvas').getContext('2d');
/*繪製餅圖的中心*/
this.w = this.ctx.canvas.width;
this.h = this.ctx.canvas.height;
/*圓心*/
this.x0 = this.w / 2 + 60;
this.y0 = this.h / 2;
/*半徑*/
this.radius = 150;
/*伸出去的線的長度*/
this.outLine = 20;
/*說明的矩形大小*/
this.rectW = 30;
this.rectH = 16;
this.space = 20;
}
PieChart.prototype.init = function (data) {
/*1.準備數據*/
this.drawPie(data);
};
PieChart.prototype.drawPie = function (data) {
var that = this;
/*1.轉化弧度*/
var angleList = this.transformAngle(data);
/*2.繪製餅圖*/
var startAngle = 0;
angleList.forEach(function (item, i) {
/*當前的結束弧度要等於下一次的起始弧度*/
var endAngle = startAngle + item.angle;
that.ctx.beginPath();
that.ctx.moveTo(that.x0, that.y0);
that.ctx.arc(that.x0, that.y0, that.radius, startAngle, endAngle);
var color = that.ctx.fillStyle = that.getRandomColor();
that.ctx.fill();
/*下一次要使用當前的這一次的結束角度*/
/*繪製標題*/
that.drawTitle(startAngle, item.angle, color , item.title);
/*繪製說明*/
that.drawDesc(i,item.title);
startAngle = endAngle;
});
};
PieChart.prototype.drawTitle = function (startAngle, angle ,color , title) {
/*1.肯定伸出去的線 經過圓心點 經過伸出去的點 肯定這個線*/
/*2.肯定伸出去的點 須要肯定伸出去的線的長度*/
/*3.固定伸出去的線的長度*/
/*4.計算這個點的座標*/
/*5.須要根據角度和斜邊的長度*/
/*5.1 使用弧度 當前扇形的起始弧度 + 對應的弧度的一半 */
/*5.2 半徑+伸出去的長度 */
/*5.3 outX = x0 + cos(angle) * ( r + outLine)*/
/*5.3 outY = y0 + sin(angle) * ( r + outLine)*/
/*斜邊*/
var edge = this.radius + this.outLine;
/*x軸方向的直角邊*/
var edgeX = Math.cos(startAngle + angle / 2) * edge;
/*y軸方向的直角邊*/
var edgeY = Math.sin(startAngle + angle / 2) * edge;
/*計算出去的點座標*/
var outX = this.x0 + edgeX;
var outY = this.y0 + edgeY;
this.ctx.beginPath();
this.ctx.moveTo(this.x0, this.y0);
this.ctx.lineTo(outX, outY);
this.ctx.strokeStyle = color;
/*畫文字和下劃線*/
/*線的方向怎麼判斷 伸出去的點在X0的左邊 線的方向就是左邊*/
/*線的方向怎麼判斷 伸出去的點在X0的右邊 線的方向就是右邊*/
/*結束的點座標 和文字大小*/
this.ctx.font = '14px Microsoft YaHei';
var textWidth = this.ctx.measureText(title).width ;
if(outX > this.x0){
/*右*/
this.ctx.lineTo(outX + textWidth,outY);
this.ctx.textAlign = 'left';
}else{
/*左*/
this.ctx.lineTo(outX - textWidth,outY);
this.ctx.textAlign = 'right';
}
this.ctx.stroke();
this.ctx.textBaseline = 'bottom';
this.ctx.fillText(title,outX,outY);
};
PieChart.prototype.drawDesc = function (index,title) {
/*繪製說明*/
/*矩形的大小*/
/*距離上和左邊的間距*/
/*矩形之間的間距*/
this.ctx.fillRect(this.space,this.space + index * (this.rectH + 10),this.rectW,this.rectH);
/*繪製文字*/
this.ctx.beginPath();
this.ctx.textAlign = 'left';
this.ctx.textBaseline = 'top';
this.ctx.font = '12px Microsoft YaHei';
this.ctx.fillText(title,this.space + this.rectW + 10 , this.space + index * (this.rectH + 10));
};
PieChart.prototype.transformAngle = function (data) {
/*返回的數據內容包含弧度的*/
var total = 0;
data.forEach(function (item, i) {
total += item.num;
});
/*計算弧度 而且追加到當前的對象內容*/
data.forEach(function (item, i) {
var angle = item.num / total * Math.PI * 2;
item.angle = angle;
});
return data;
};
PieChart.prototype.getRandomColor = function () {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
};
var data = [
{
title: '15-20歲',
num: 6
},
{
title: '20-25歲',
num: 30
},
{
title: '25-30歲',
num: 10
},
{
title: '30以上',
num: 8
}
];
var pieChart = new PieChart();
pieChart.init(data);
</script>
</body>
</html>
方向鍵控制行走的小人例子(繪製圖片的相關知識)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
//建立構造函數
var Person = function (ctx) {
/*繪製工具*/
this.ctx = ctx || document.querySelector('canvas').getContext('2d');
/*引入圖片路徑*/
this.src = 'image/03.png';
/*畫布的大小*/
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
/*行走相關參數*/
this.stepSzie = 10; //行走步伐大小
this.direction = 0; //行走方向， 0前 1左 2右 3後
this.stepX = 0; //x軸方向的偏移步數
this.stepY = 0; //y軸方向的偏移步數
/*初始化方法*/
this.init();
};
//初始化方法
Person.prototype.init = function () {
var that = this;
/*1.加載圖片*/
this.loadImage(function (image) {
/*圖片的大小*/
that.imageWidth = image.width;
that.imageHeight = image.height;
/*人物的大小*/
that.personWidth = that.imageWidth / 4;
that.personHeight = that.imageHeight / 4;
/*繪製圖片的起點*/
that.x0 = that.canvasWidth / 2 - that.personWidth / 2; //爲何減去that.personWidth/2？與css盒子居中原理相似
that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
/*2.默認繪製在中心位置正面朝外*/
that.ctx.drawImage(image,
0,0,
that.personWidth,that.personHeight,
that.x0,that.y0,
that.personWidth,that.personHeight);
/*3.能經過方向鍵去控制人物行走*/
that.index = 0;
document.onkeydown = function (e) {
if(e.keyCode == 40){
that.direction = 0;
that.stepY ++; //步數偏移(走了多少步)
that.drawImage(image); //調用函數繪製圖片
/*前*/
}else if(e.keyCode == 37){
that.direction = 1;
that.stepX --;
that.drawImage(image);
/*左*/
}else if(e.keyCode == 39){
that.direction = 2;
that.stepX ++;
that.drawImage(image);
/*右*/
}else if(e.keyCode == 38){
that.direction = 3;
that.stepY --;
that.drawImage(image);
/*後*/
}
}
});
}
/*加載圖片專用函數*/
Person.prototype.loadImage = function (callback) { //這個函數只用來設定加載圖片，因此傳一個callback回調，用來實現分離
var image = new Image(); //實例化一個圖片對象
image.onload = function () { //圖片必須加載完成後才能調用，因此謝了這個函數
callback && callback(image);
};
image.src = this.src; //引入圖片路徑
};
/*繪製圖片*/
Person.prototype.drawImage = function (image) {
this.index ++; //經過index，動態控制小人位置，如this.index*this.personWidth
this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight); //清除畫布
/*繪圖*/
/*在精靈圖上的定位 x 索引*/
/*在精靈圖上的定位 y 方向*/
this.ctx.drawImage(image,
this.index * this.personWidth,this.direction * this.personHeight,
this.personWidth,this.personHeight,
this.x0 + this.stepX * this.stepSzie ,this.y0 + this.stepY * this.stepSzie,
this.personWidth,this.personHeight);
/*若是索引超出了 ，則從新設爲0*/
if(this.index >= 3){
this.index = 0;
}
};
new Person();
</script>
</body>
</html>
參考一下https://blog.csdn.net/Strawberry_595/article/details/83513438
相關文章
- 1. [Canvas]1-1Hello canvas
- 2. canvas
- 3. Canvas
- 4. CANVAS
- 5. canvas②
- 更多相關文章...
- • Mozilla Firefox 瀏覽器 - 瀏覽器信息
- • Internet Explorer 瀏覽器 - 瀏覽器信息
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
