[TOC]
#### 什么是canvas:
? <canvas> 標簽定義圖形,比如圖表和其他圖像。
? <canvas> 標簽只是圖形容器,您必須使用腳本來繪制圖形。
? canvas 其實對于HTML來說很簡單,只是一個標簽元素而已,自己并沒有行為,但
卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制
到一塊畫布上,擁有繪制路徑,矩形,圓,字符以及圖像等功能。 所有的標簽只是
圖形的容器,必須使用JavaScript的 API 操作繪圖。
標簽:
<canvas id=“canvas” width=“500” height=“500”></canvas>
getContext
? 返回一個用于在畫布上繪圖的環境
<script type="text/javascript">
var c = document.getElementById("canvas");
var obj = c.getContext('2d');
</script>
#### canvas方法或屬性
#### 矩形
? context.fillRect(x,y,width,height) 繪制“被填充”的矩形
? context.strokeRect(x,y,width,height) 繪制矩形(無填充)
? context.clearRect(x,y,width,height) 在給定的矩形內清除指定的像素
#### 顏色、樣式
? context.fillStyle=‘#f00f00’ 設置或返回填充繪畫的顏色、漸變或模式
? context.strokeStyle=‘green’ 設置或返回筆觸的顏色、漸變或模式
? context.lineWidth=10 設置或返回當前的線條寬度
? context.lineJoin=“邊界類型” bevel:斜角,round:圓角,miter:尖角
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: #272822;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<!--canvas標簽相當于是一個畫板-->
<!--canvas畫板的寬高不要用css去定義-->
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
//獲得繪畫環境(相當于鋪了一層畫布)
var cv = canvas.getContext('2d');
//設置填充顏色
cv.fillStyle = 'yellow';
//繪制一個實心矩形
cv.fillRect(100,100,500,300);
//設置描邊線條顏色
cv.strokeStyle = 'pink';
//設置線條粗細
cv.lineWidth = 5;
//繪制一個空心矩形
cv.strokeRect(300,200,400,260);
//清理會話區域
cv.clearRect(220,170,200,160);
</script>
</body>
</html>
#### 路徑
? beginPath() 開始一條路徑,或重置當前路徑
? closePath() 創建從當前點回到起始點的路徑(閉合路徑)
? moveTo(x,y) 把路徑移動到畫布中的指定點,不創建線條
? lineTo(x,y) 添加一個新點,創建從該點到最后指定點的線條
? fill() 填充當前繪圖(填充路徑)
? stroke() 繪制已定義的路徑(連線路徑)
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: #272822;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
//獲得繪畫環境(相當于鋪了一層畫布)
var cv = canvas.getContext('2d');
//開啟路徑
cv.beginPath();
//指定路徑起點
cv.moveTo(30,30);
//指定終點
cv.lineTo(160,300);
cv.lineTo(290,30);
cv.lineTo(420,300);
cv.lineTo(550,30);
cv.strokeStyle = 'yellow';
cv.lineWidth = 5;
//繪制路徑
cv.stroke();
</script>
</body>
</html>
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: #272822;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
//獲得繪畫環境(相當于鋪了一層畫布)
var cv = canvas.getContext('2d');
//開啟路徑
cv.beginPath();
//指定路徑起點
cv.moveTo(30,30);
//指定終點
cv.lineTo(160,300);
cv.lineTo(290,30);
//關閉路徑,會將最后一個點和第一個點用直線連接,從而形成一個封閉的空間
cv.closePath();
//邊界類型
cv.lineJoin = 'round';
cv.strokeStyle = 'yellow';
cv.lineWidth = 5;
//繪制路徑
cv.stroke();
cv.fillStyle = 'deepskyblue';
//填充
//cv.fill();
</script>
</body>
</html>
畫板實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: #272822;
margin: 0 auto;
display: block;
position: relative;
}
#color{
margin-left: 200px;
}
</style>
</head>
<body>
<input type="color" id="color" />
<input type="range" id="range" min="1" max="20" value="3" />
<span id="r">3</span>
<input type="button" id="e" value="橡皮擦" />
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var color = document.getElementById("color");
var range = document.getElementById("range");
//獲得繪畫環境(相當于鋪了一層畫布)
var cv = canvas.getContext('2d');
cv.strokeStyle = 'yellow';
cv.lineWidth = 3;
canvas.onmousedown = function(e){
var ev = window.event || e;
//獲得鼠標位置
var mousex = ev.layerX || ev.offsetX;
var mousey = ev.layerY || ev.offsetY;
//開啟路徑
cv.beginPath();
//設置起點
cv.moveTo(mousex,mousey);
//加鼠標移動事件
canvas.onmousemove = function(e){
var ev = window.event || e;
var newx = ev.layerX || ev.offsetX;
var newy = ev.layerY || ev.offsetY;
cv.lineTo(newx,newy);
cv.stroke();
}
}
//鼠標抬起事件
canvas.onmouseup = function(){
//結束路徑
cv.closePath();
//取消鼠標移動事件
canvas.onmousemove = null;
}
color.onchange = function(){
//將用戶選擇的顏色設置給畫板
cv.strokeStyle = this.value;
}
range.onchange = function(){
//將用戶拖動的值設置給線條粗細
cv.lineWidth = this.value;
document.getElementById("r").innerHTML = this.value;
}
//橡皮擦
document.getElementById("e").onclick = function(){
alert('開始盡情擦黑板吧!');
cv.strokeStyle = '#272822';
}
</script>
</body>
</html>
#### 畫布控制
? context.scale(scalewidth,scaleheight) 縮放處理 1=100%
? context.translate(x,y) 圖形位置處理 (平移)
? context.rotate(angle) 旋轉畫布,單位:弧度,默認以畫布為圓心旋轉
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: #272822;
margin: 0 auto;
display: block;
position: relative;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
//獲得繪畫環境(相當于鋪了一層畫布)
var cv = canvas.getContext('2d');
//縮放
//cv.scale(1.5,0.5);
//平移
//cv.translate(-100,200);
//旋轉(單位是弧度)
//360角度 對應 2π弧度
cv.rotate(30*Math.PI/180);
cv.strokeStyle = 'yellow';
cv.lineWidth = 5;
cv.beginPath();
cv.moveTo(40,40);
cv.lineTo(200,300);
cv.lineTo(360,40);
cv.closePath();
cv.stroke();
</script>
</body>
</html>
#### 畫圓弧
畫圓弧
? context.arc(x,y,r,sAngle,eAngle,counterclockwise) 創建弧/曲線(用于創建圓形或部分圓)
參數說明:
x 圓的中心的 x 坐標。
y 圓的中心的 y 坐標。
r 圓的半徑。
sAngle 起始角,以弧度計。(弧的圓形的三點鐘位置是 0度)。
eAngle 結束角,以弧度計。
counterclockwise 可選。False = 順時針,true = 逆時針。
弧度計算公式: 角度*Math.PI/180
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: #272822;
margin: 0 auto;
display: block;
position: relative;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
//獲得繪畫環境(相當于鋪了一層畫布)
var cv = canvas.getContext('2d');
cv.lineWidth = 5;
cv.strokeStyle = 'yellow';
//cv.arc(300,200,150,0,90*Math.PI/180);
//cv.arc(300,200,150,0,180*Math.PI/180);
cv.arc(300,200,150,0,360*Math.PI/180);
cv.stroke();
cv.fillStyle = 'greenyellow';
cv.fill();
</script>
</body>
</html>
eg: 餅狀圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: #272822;
margin: 0 auto;
display: block;
position: relative;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
//獲得繪畫環境(相當于鋪了一層畫布)
var cv = canvas.getContext('2d');
cv.lineWidth = 5;
cv.strokeStyle = 'yellow';
cv.beginPath();
cv.moveTo(300,200);
cv.arc(300,200,150,0,60*Math.PI/180);
cv.closePath();
cv.fillStyle = 'pink';
cv.fill();
cv.beginPath();
cv.moveTo(300,200);
cv.arc(300,200,150,60*Math.PI/180,110*Math.PI/180);
cv.closePath();
cv.fillStyle = 'greenyellow';
cv.fill();
cv.beginPath();
cv.moveTo(300,200);
cv.arc(300,200,150,110*Math.PI/180,220*Math.PI/180);
cv.closePath();
cv.fillStyle = 'yellow';
cv.fill();
cv.beginPath();
cv.moveTo(300,200);
cv.arc(300,200,150,220*Math.PI/180,300*Math.PI/180);
cv.closePath();
cv.fillStyle = 'deepskyblue';
cv.fill();
cv.beginPath();
cv.moveTo(300,200);
cv.arc(300,200,150,300*Math.PI/180,360*Math.PI/180);
cv.closePath();
cv.fillStyle = 'orangered';
cv.fill();
</script>
</body>
</html>
#### 繪制線:
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
c = document.getElementById("canvas");
obj = c.getContext('2d');
obj.lineWidth = 10;
//線顏色
obj.strokeStyle = "red";
//開始繪制路徑
obj.beginPath();
//光標移動到0,0
obj.moveTo(0, 0);
//繪制到300,300
obj.lineTo(300, 300);
//繪制定義好的路徑
obj.stroke();
</script>
#### 繪制矩形
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
c = document.getElementById("canvas");
//獲得繪圖對象
obj = c.getContext('2d');
//線寬
obj.lineWidth=2;
//顏色
obj.strokeStyle='green';
//繪制開始
obj.beginPath();
//繪制矩形
//參數:x,y,width,height
obj.strokeRect(50,50,100,100);
//填充顏色
obj.fillStyle="red";
//實心矩形
obj.fillRect(220,220,100,100);
</script>
#### 文本控制:
設置字體屬性
? context.font="40px Arial”
設置對齊方式
? context.textAlign=“left | right | center”
在畫布上繪制“被填充的”文本
? context.fillText(text,x,y,maxWidth);
在畫布上繪制文本(無填充)
? context.strokeText(text,x,y,maxWidth)
設置文字基線
? context.textBaseline=“top | middle | bottom”;
獲取文本寬度
? context.measureText(text);
eg:
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
//獲得繪畫環境(相當于鋪了一層畫布)
var cv = canvas.getContext('2d');
cv.fillStyle = 'yellow';
cv.textAlign = 'center';
cv.textBaseline = 'bottom';
//設置文字大小和字體
cv.font = '50px 黑體';
cv.fillText('后盾人 人人做后盾',300,150,600);
cv.lineWidth = 1
cv.strokeStyle = 'white';
cv.moveTo(0,150);
cv.lineTo(800,150);
cv.stroke();
cv.moveTo(300,0);
cv.lineTo(300,500);
cv.stroke();
console.log('寬度',cv.measureText('后盾人').width);
</script>
#### 驗證碼
eg:
<canvas id="canvas" width="200" height="50"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
//獲得繪畫環境(相當于鋪了一層畫布)
var cv = canvas.getContext('2d');
cv.fillStyle = 'yellow';
cv.font = '30px arial';
var words = 'QWERTYUIOPASDFGHJKLZXCVBNM';
for (var i=0;i<4;i++) {
var num = Math.floor(Math.random()*(words.length-1+1-0)+0);
//隨機位置
var l = Math.floor(Math.random()*((i*50+20)+1-i*50)+i*50);
var t = Math.floor(Math.random()*(45+1-30)+30);
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
cv.fillStyle = 'rgb('+r+','+g+','+b+')';
//隨機角度
var d = Math.floor(Math.random()*(5+1+5)-5);
cv.rotate(d*Math.PI/180);
cv.fillText(words[num],l,t);
}
for (var i=0;i<10;i++) {
var startx = Math.floor(Math.random()*201);
var starty = Math.floor(Math.random()*51);
var endx = Math.floor(Math.random()*201);
var endy = Math.floor(Math.random()*51);
cv.beginPath();
cv.moveTo(startx,starty);
cv.lineTo(endx,endy);
cv.closePath();
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var o = Math.floor(Math.random()*101);
cv.strokeStyle = 'rgba('+r+','+g+','+b+','+o/100+')';
cv.stroke();
}
</script>
#### 圖像控制
向畫布上繪制圖像、畫布或視頻
語法 1: 在畫布上定位圖像:
context.drawImage(img,畫布x坐標,畫面y坐標);
語法 2: 在畫布上定位圖像,并規定圖像的寬度和高度
context.drawImage(img,畫布x坐標,畫面y坐標,圖片width,圖片height);
語法 3: 剪切圖像,并在畫布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
參數:
img 規定要使用的圖像、畫布或視頻。
sx 可選。開始剪切的 x 坐標位置。
sy 可選。開始剪切的 y 坐標位置。
swidth可選。被剪切圖像的寬度。
sheight可選。被剪切圖像的高度。
x 可選。在畫布上放置圖像的 x 坐標位置。
y 可選。在畫布上放置圖像的 y 坐標位置。
width 可選。要使用的圖像的寬度。(伸展或縮小圖像)
height可選。要使用的圖像的高度。(伸展或縮小圖像)
注意:參數數量不同,x、y的函數不同
eg:
<canvas id="canvas" width="800" height="500"></canvas>
<img src="qiutian.jpg" id="dog" hidden/>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var dog = document.getElementById("dog");
//也可以手動創建圖像資源
//var newimg = document.createElement('img');
//newimg.src = 'qiutian.jpg';
//獲得繪畫環境(相當于鋪了一層畫布)
var cv = canvas.getContext('2d');
//等圖片加載完再去繪制圖像
dog.onload = function(){
//繪制圖像
//cv.drawImage(dog,20,20);
//cv.drawImage(dog,20,20,200,50);
cv.drawImage(dog,150,50,200,150,30,30,400,250);
}
</script>
#### 自定義填充
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
參數值
參數 描述
image 規定要使用的圖片、畫布或視頻元素。
repeat 默認。該模式在水平和垂直方向重復。
repeat-x 該模式只在水平方向重復。
repeat-y 該模式只在垂直方向重復。
no-repeat 該模式只顯示一次(不重復)。
<!DOCTYPE html>
<html>
<body>
<p>要用到的圖片:</p>
<img src="/i/lamp.gif" id="lamp" />
<p>Canvas:</p>
<button onclick="draw('repeat')">Repeat</button>
<button onclick="draw('repeat-x')">Repeat-x</button>
<button onclick="draw('repeat-y')">Repeat-y</button>
<button onclick="draw('no-repeat')">No-repeat</button>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript">
function draw(direction)
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height);
var img=document.getElementById("lamp")
var pat=ctx.createPattern(img,direction);
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
}
</script>
</body>
</html>
#### getImageData() 和 putImageData()
下面的代碼通過 getImageData() 復制畫布上指定矩形的像素數據,然后通過 putImageData() 將圖像數據放回畫布:
定義和用法
putImageData() 方法將圖像數據(從指定的 ImageData 對象)放回畫布上。
JavaScript 語法:
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
參數值
參數 描述
imgData 規定要放回畫布的 ImageData 對象。
x ImageData 對象左上角的 x 坐標,以像素計。
y ImageData 對象左上角的 y 坐標,以像素計。
dirtyX 可選。水平值(x),以像素計,在畫布上放置圖像的位置。
dirtyY 可選。水平值(y),以像素計,在畫布上放置圖像的位置。
dirtyWidth 可選。在畫布上繪制圖像所使用的寬度。
dirtyHeight 可選。在畫布上繪制圖像所使用的高度。
eg:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
</script>
<button onclick="copy()">復制</button>
</body>
</html>
#### 圖像反色處理
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: #272822;
margin: 0 auto;
display: block;
position: relative;
}
</style>
</head>
<body>
<canvas id="canvas" width="1200" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var cv = canvas.getContext('2d');
var dog = document.createElement('img');
dog.src = 'qiutian.jpg';
dog.onload = function(){
cv.drawImage(dog,20,20);
//獲得畫布圖像信息
var alldata = cv.getImageData(20,20,500,333);
//data屬性中存儲的就是所有像素點的信息
console.log(alldata.data);
//[2,3,4,255,2,3,4,255,2,3,4,255]
for (var i=0;i<alldata.data.length;i++) {
if (i%4!=3) {
alldata.data[i] = 255-alldata.data[i];
}
}
//寫入畫布信息
cv.putImageData(alldata,600,20);
}
</script>
</body>
</html>
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs