<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body {
background-color: #000;
}
.box {
height: 300px;
width: 300px;
background-color: #00ff78;
margin: 200px auto;
padding: 40px;
filter: blur(2px)
}
.box1 {
height: 300px;
width: 300px;
background-color: #fff;
border-radius: 50%;
} */
</style>
</head>
<body>
<!-- <div class="box">
</div>
<div class="box1"></div> -->
<canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 10px;"></canvas>
<script>
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext("2d")
// 線條
// ctx.moveTo(50, 50); // 設(shè)置初始位置狡耻，參數(shù)為初始位置x和y的坐標(biāo)點(diǎn)
// ctx.lineTo(200, 200); // 繪制一條從初始位置到指定位置的直線哀峻，參數(shù)為指定位置x和y的坐標(biāo)點(diǎn)
// ctx.lineTo(200, 50);
// ctx.lineTo(50, 50);
// ctx.stroke(); // 通過線條來繪制圖形輪廓
// ctx.fill(); // 通過填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形
// 矩形
// ctx.strokeRect(50, 50, 300, 50) // 繪制一個(gè)矩形的邊框 (x, y, width, height) x和y 是矩形的起點(diǎn)坐標(biāo)
// ctx.fillRect(50, 50, 300, 50) // 繪制一個(gè)填充的矩形 (x, y, width, height) x和y 是矩形的起點(diǎn)坐標(biāo)
// ctx.clearRect(50, 50, 200, 50) // 清除指定矩形區(qū)域 (x, y, width, height) 讓清除部分完全透明，x和y 是矩形的起點(diǎn)坐標(biāo)隆豹，width和height 是矩形的寬高
// 圓
// arc(x, y, radius, startAngle, endAngle, anticlockwise)拯勉。x和Y為圓心的坐標(biāo)豹障，radius為半徑，startAngle為圓弧或圓的開始位置宿接，endAngle為圓弧或圓的結(jié)束位置赘淮，anticlockwise是繪制的方向（不寫默認(rèn)為false，從順時(shí)針方向）
// 弧度 = (Math.PI / 180) * 角度睦霎。 Math.PI 相當(dāng)于180 度
// ctx.arc(60, 60, 50, 5, Math.PI, true);
// ctx.stroke();
// ctx.beginPath() // 新建一條路徑梢卸，生成之后，圖形繪制命令被指向到路徑上副女。
// ctx.closePath() // 閉合路徑之后圖形繪制命令又重新指向到上下文中
// 咱們開啟和關(guān)閉路徑的時(shí)候蛤高，關(guān)閉路徑其實(shí)并不是必須的，對(duì)于新路徑其實(shí)每次都開啟新路徑就ok碑幅。
// 橢圓
// ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
// x戴陡、y：橢圓的圓心位置
// radiusX、radiusY：x軸和y軸的半徑
// rotation：橢圓的旋轉(zhuǎn)角度沟涨，以弧度表示
// startAngle：開始繪制點(diǎn)
// endAngle：結(jié)束繪制點(diǎn)
// anticlockwise：繪制的方向（默認(rèn)順時(shí)針）恤批，可選參數(shù)。
// 貝塞爾曲線
// 二次貝塞爾曲線
// quadraticCurveTo(cp1x, cp1y, x, y)裹赴，其中cp1x和cp1y為一個(gè)控制點(diǎn)喜庞，x和y為結(jié)束點(diǎn)
// 三次貝塞爾曲線
// ctx.bezierCurveTo(cp1x,cp1y, cp2x,cp2y, x, y)诀浪，其中cp1x和cp1y為一個(gè)控制點(diǎn)，cp2x和cp2y為第二個(gè)控制點(diǎn)延都，x和y為結(jié)束點(diǎn)
// 設(shè)置線條樣式
// lineWidth 設(shè)置當(dāng)前繪線的粗細(xì)雷猪。屬性值必須為正數(shù)。默認(rèn)值是 1.0晰房。
// lineCap 設(shè)置線段端點(diǎn)顯示的樣子春宣。可選值為：butt嫉你，round 和 square。默認(rèn)是 butt躏惋。
// lineJoin 該屬性可以設(shè)置兩線段連接處所顯示的樣子幽污。可選值為：round, bevel 和 miter簿姨。默認(rèn)是 miter距误。
// miterLimit 限制當(dāng)兩條線相交時(shí)交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內(nèi)角頂點(diǎn)到外角頂點(diǎn)的長度
// 繪制一條寬度為10的直線
// ctx.beginPath()
// ctx.lineWidth = 10;
// ctx.moveTo(50, 20);
// ctx.lineTo(250, 20);
// ctx.stroke();
// ctx.closePath();
// // 繪制一條寬度為20的直線
// ctx.beginPath()
// ctx.lineWidth = 20;
// ctx.lineCap='square'
// ctx.lineJoin='bevel'
// ctx.miterLimit = 10
// ctx.moveTo(50, 50);
// ctx.lineTo(250, 250);
// ctx.lineTo(500, 50);
// ctx.stroke();
// ctx.closePath();
// setLineDash 可以設(shè)置當(dāng)前虛線樣式扁位。
// getLineDash 則是返回當(dāng)前虛線設(shè)置的樣式准潭，長度為非負(fù)偶數(shù)的數(shù)組。
// ctx.setLineDash([5, 10, 20, 40]);
// console.log(ctx.getLineDash()); // [5, 10, 20, 40]
// 透明度
// ctx.globalAlpha = 0.5;
// 線性漸變
// createLinearGradient(x1, y1, x2, y2)域仇，參數(shù)分別為 起點(diǎn)的坐標(biāo)和終點(diǎn)的坐標(biāo)刑然。
// 在漸變的設(shè)置中還需要一個(gè)方法來添加漸變的顏色，語法為：gradient.addColorStop(offset, color)暇务，其中color就是顏色泼掠，offset 則是顏色的偏移值，只為0到1之間的數(shù)
// 創(chuàng)建漸變
// var gradient1 = ctx.createLinearGradient(10, 10, 400, 10);
// gradient1.addColorStop(0, "#00ff00");
// gradient1.addColorStop(1, "#ff0000");
// var gradient2 = ctx.createLinearGradient(10, 10, 400, 10);
// // 從0.5的位置才開始漸變
// gradient2.addColorStop(0.5, "#00ff00");
// gradient2.addColorStop(1, "#ff0000");
// ctx.beginPath()
// ctx.fillStyle = gradient1;
// ctx.fillRect(10, 10, 400, 100);
// ctx.beginPath();
// ctx.fillStyle = gradient2;
// ctx.fillRect(10, 150, 400, 100);
// 徑向漸變
// ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)垦细，參數(shù)分別為開始圓的坐標(biāo)和半徑以及結(jié)束圓的坐標(biāo)和半徑择镇。
// 圖案樣式
// Canvas中想繪制圖案效果，需要用 createPattern 方法來實(shí)現(xiàn)
// createPattern(image, type)括改，參數(shù)分別為：Image 參數(shù)可以是一個(gè) Image 對(duì)象腻豌，也可以是一個(gè) canvas 對(duì)象，Type 為圖案繪制的類型嘱能，可用的類型分別有：repeat吝梅，repeat-x，repeat-y 和 no-repeat
// var img = new Image();
// img.src = "./image.png";
// img.onload = function() {
// // 圖片加載完以后
// // 創(chuàng)建圖案
// var ptrn = ctx.createPattern(img, 'no-repeat');
// ctx.fillStyle = ptrn;
// ctx.fillRect(0, 0, 500, 500);
// }
// 繪制文本
// strokeText（描邊）
// ctx.strokeText(text, x, y, maxWidth) 參數(shù)分別為：text：繪制的文案 x焰檩、y：文本的起始位置 maxWidth：可選參數(shù)帆疟，最大寬度。需要注意的是當(dāng)文案大于最大寬度時(shí)不是裁剪或者換行懂版，而是縮小字體。
// ctx.strokeText("Canvas 詳解", 50, 50);
// fillText（填充）
// ctx.fillText(text, x, y, maxWidth) 參數(shù)分別為：text：繪制的文案 x穿扳、y：文本的起始位置 maxWidth：可選參數(shù)，最大寬度国旷。需要注意的是當(dāng)文案大于最大寬度時(shí)不是裁剪或者換行矛物，而是縮小字體。
// ctx.fillText("Canvas 詳解", 50, 50);
// 文本樣式
// font 用于繪制文本的樣式跪但。默認(rèn)的字體是 10px sans-serif履羞。
// textAlign 文本對(duì)齊的方式÷啪茫可選值為：left忆首、right、center被环、start和end糙及。默認(rèn)值是 start。
// direction 文本的方向筛欢〗牵可選值為：ltr（文本方向從左向右）、rtl（文本方向從右向左）版姑、inherit（根據(jù)情況繼承 Canvas元素或者 Document 柱搜。）。默認(rèn)值是 inherit剥险。
// textBaseline 基線對(duì)齊選項(xiàng)聪蘸，決定文字垂直方向的對(duì)齊方式”碇疲可選值為：top宇姚、hanging、middle夫凸、alphabetic浑劳、ideographic和bottom。默認(rèn)值是 alphabetic夭拌。
// ctx.font = "30px serif"; // 設(shè)置文案大小和字體
// ctx.direction = "ltr"; // 文本方向從左向右
// ctx.textAlign = "left"; // 左對(duì)齊
// measureText 測(cè)量文本魔熏，返回一個(gè) TextMetrics對(duì)象。
// var ctx = canvas.getContext('2d');
// ctx.font = "30px serif"; // 設(shè)置文案大小和字體
// ctx.beginPath();
// ctx.strokeText("Hi Canvas !", 150, 100);
// var text = ctx.measureText("Hi Canvas !");
// console.log("?? ~ 文案寬度：", text.width)
// ctx.beginPath();
// // 設(shè)置了文案最大寬度
// ctx.strokeText("Hi Canvas !", 150, 200, 100);
// var text1 = ctx.measureText("Hi Canvas !");
// console.log("?? ~ 文案寬度：", text1.width)
// 陰影
// shadowOffsetX鸽扁、shadowOffsetY
// shadowOffsetX 和 shadowOffsetY 用來設(shè)定陰影在 X 和 Y 軸的延伸距離蒜绽，它們是不受變換矩陣所影響的。負(fù)值表示陰影會(huì)往上或左延伸桶现，正值則表示會(huì)往下或右延伸躲雅，它們默認(rèn)都為 0。
// shadowBlur: shadowBlur 用于設(shè)定陰影的模糊程度骡和，其數(shù)值并不跟像素?cái)?shù)量掛鉤相赁，也不受變換矩陣的影響相寇，默認(rèn)為 0。
// shadowColor: shadowColor 是標(biāo)準(zhǔn)的 CSS 顏色值钮科，用于設(shè)定陰影顏色效果唤衫，默認(rèn)是全透明的黑色。
// ctx.font = "50px serif"; // 設(shè)置文案大小和字體
// ctx.shadowColor = "#cccccc"; // 設(shè)置陰影顏色
// ctx.fillStyle = "#ee7934"; // 設(shè)置填充顏色
// ctx.shadowOffsetX = 10; // X軸上的陰影
// ctx.shadowOffsetY = 10; // Y軸上的陰影
// ctx.shadowBlur = 5; // 陰影的模糊程度
// ctx.fillText("Hi Canvas !", 100, 50);
// ctx.fillRect(100, 100, 200, 100);
// ctx.shadowOffsetX = -10;
// ctx.shadowOffsetY = -10;
// ctx.shadowBlur = 5;
// ctx.fillText("Hi Canvas !", 100, 300);
// ctx.fillRect(100, 350, 200, 100);
// 繪制圖片
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：只有單純的繪制功能绵脯，可以繪制圖片佳励、視頻和別的Canvas對(duì)象等。
// image：繪制到上下文的元素蛆挫。
// sx赃承、sy：裁剪框的左上角X軸坐標(biāo)和Y軸坐標(biāo)。
// sWidth悴侵、sHeight：裁剪框的寬度和高度楣导。
// dx、dy：繪制到上下文的元素畜挨，在上下文中左上角的X軸坐標(biāo)和Y軸坐標(biāo)。
// dWidth噩凹、dHeight：繪制到上下文的元素巴元，在上下文中繪制的寬度和高度。如果不說明驮宴，在繪制時(shí)image寬度和高度不會(huì)縮放逮刨。
// var img = new Image();
// img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191212%2F556cc408058d4c64a46468761406afe6.png&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660103116&t=8dd0c641e1e1890fa65ee80dfa428d34';
// img.onload = function(){
// ctx.drawImage(img, 0, 0);
// }
// 狀態(tài)的保存和恢復(fù)
// save() 和 restore() 方法是用來保存和恢復(fù) canvas 狀態(tài)的，方法不需要參數(shù)堵泽⌒藜海可以理解為就是對(duì)canvas 狀態(tài)的快照進(jìn)行保存和恢復(fù)。
// ctx.fillStyle = "#cccccc";
// ctx.fillRect(10, 10, 300, 100);
// ctx.save(); // 保存狀態(tài)
// ctx.fillStyle = "#ee7034";
// ctx.fillRect(10, 150, 300, 100);
// ctx.restore(); // 還原到上次保存的狀態(tài)
// ctx.fillRect(10, 300, 300, 100);
// 移動(dòng)迎罗、旋轉(zhuǎn)和縮放
// 移動(dòng)：translate(x, y) 睬愤，x 是左右偏移量，y 是上下偏移量纹安。
// 旋轉(zhuǎn)：rotate(angle)尤辱，angle是旋轉(zhuǎn)的角度，它是順時(shí)針旋轉(zhuǎn)厢岂，以弧度為單位的值光督。
// 縮放：scale(x, y)，x 為水平縮放的值塔粒，y 為垂直縮放得值结借。x和y的值小于1則為縮小，大于1則為放大卒茬。默認(rèn)值為 1船老。
</script>
<!-- <input id="aa" multiple type="file">
<script>
document.getElementById("aa").onchange = function (e) {
console.log(e)
}
</script> -->
</body>
</html>
canvas
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門张惹，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人岭洲，你說我怎么就攤上這事宛逗。” “怎么了盾剩？”我有些...
- 文/不壞的土叔 我叫張陵雷激，是天一觀的道長。 經(jīng)常有香客問我告私，道長屎暇，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任驻粟，我火速辦了婚禮根悼，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘蜀撑。我一直安慰自己挤巡，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布酷麦。 她就那樣靜靜地躺著矿卑，像睡著了一般。 火紅的嫁衣襯著肌膚如雪沃饶。 梳的紋絲不亂的頭發(fā)上粪摘，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼勤讽！你這毒婦竟也來了蟋座？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬榮一對(duì)情侶失蹤脚牍，失蹤者是張志新（化名）和其女友劉穎向臀，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诸狭，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡券膀，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了驯遇。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芹彬。...
- 正文 年R本政府宣布玩郊，位于F島的核電站，受9級(jí)特大地震影響枉阵，放射性物質(zhì)發(fā)生泄漏译红。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一岭妖、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧反璃，春花似錦昵慌、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至梧田，卻和暖如春淳蔼，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背裁眯。 一陣腳步聲響...
- 正文 我出身青樓存皂，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子旦袋，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 解決方案：用clearRect刷新canvas鹉戚。
- 項(xiàng)目中有一個(gè)需求：實(shí)現(xiàn)畫板的功能。提供一張圖片蔗牡∮毕担可以在上面寫字，并且可以放大縮小辩越。 1.圖片轉(zhuǎn)換為canvas 在...
- canvas圖片操作 canvas像素級(jí)操作 canvas視頻(video)操作
- 代碼下載：Github視頻地址：慕課·canvas小球倒計(jì)時(shí) 二嘁扼、倒計(jì)時(shí)數(shù)字展示 2.1、靜態(tài)數(shù)字展示 如果想用一...
- fillStyle 屬性設(shè)置或返回用于填充繪畫的顏色黔攒、漸變或樣式 strokeStyle 屬性設(shè)置或返回用于筆觸的...
