-
全部代碼，不謝
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>canvas</title>
</head>
<body>
? ? <canvas id="canvas" width="1024" height="768" ></canvas>
</body>
<script>
? ? var canvas = document.getElementById('canvas');
? ? canvas.width = 800;
? ? canvas.height = 800;
? ? var context = canvas.getContext('2d');
? ? // createPattern(img, repeat-style);
? ? // repeat-style: no-repeat/repeat-x/repeat-y/repeat
? ? // var bgImg = new Image();
? ? // bgImg.src = 'https://img1.sycdn.imooc.com//5333a1bc00014e8302000200-140-140.jpg';
? ? // bgImg.onload = function () {
? ? //? ? ?var pattern = context.createPattern(bgImg, 'repeat');
? ? //? ? ?context.fillStyle = pattern;
? ? //? ? ?context.fillRect(0, 0, 800, 800);
? ? // }
? ? var bgCanvas = createBackgroundCanvas();
? ? var pattern = context.createPattern(bgCanvas, 'repeat');
? ? context.fillStyle = pattern;
? ? context.fillRect(0, 0, 800, 800);
? ? function createBackgroundCanvas() {
? ? ? ? var canvas = document.createElement('canvas');
? ? ? ? canvas.width = 100;
? ? ? ? canvas.height = 100;
? ? ? ? var context = canvas.getContext('2d');
? ? ? ? drawStar(context, 50, 50, 50, 0); // 之前的課程中寫的的
? ? ? ? return canvas;
? ? }
? ? function drawStar(ctx, x, y, R, rot) {
? ? ? ? ctx.save();
? ? ? ? ctx.translate(x, y);
? ? ? ? ctx.rotate(rot/180*Math.PI);
? ? ? ? ctx.scale(R, R);
? ? ? ? starPath(ctx);
? ? ? ? ctx.fillStyle = '#fb3';
? ? ? ? ctx.fill();
? ? ? ? ctx.restore();
? ? }
? ? function starPath(ctx) {
? ? ? ? ctx.beginPath();
? ? ? ? for (var i = 0; i < 5; i++) {
? ? ? ? ? ? ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),
? ? ? ? ? ? ? ? ? -Math.sin((18+i*72)/180*Math.PI));
? ? ? ? ? ? ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
? ? ? ? ? ? ? ? ? -Math.sin((54+i*72)/180*Math.PI)*0.5);
? ? ? ? }
? ? ? ? ctx.closePath();
? ? }
</script>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? <meta charset="UTF-8">
? <title>Document</title>
</head>
<body>
? <canvas id="canvas" ></canvas>
? <script type="text/javascript">
? ? window.onload = function() {
? ? ? var canvas = document.getElementById("canvas");
? ? ? canvas.width = 600;
? ? ? canvas.height = 600;
? ? ? var context = canvas.getContext('2d');
? ? ? context.fillStyle = 'black';
? ? ? context.fillRect(0, 0, canvas.width, canvas.height);
? ? ? for (var i = 0; i < 200; i++) {
? ? ? ? var r = Math.random() * 10 + 10;
? ? ? ? var x = Math.random() * canvas.width;
? ? ? ? var y = Math.random() * canvas.height;
? ? ? ? var a = Math.random() * 360;
? ? ? ? drawStar(context, x, y, r, a);
? ? ? }
? ? }
? ? function drawStar(ctx, x, y, R, rot) {
? ? ? ? ctx.save();
? ? ? ? ctx.translate(x, y);
? ? ? ? ctx.rotate(rot/180*Math.PI);
? ? ? ? ctx.scale(R, R);
? ? ? ? starPath(ctx);
? ? ? ? ctx.fillStyle = '#fb3';
? ? ? ? ctx.fill();
? ? ? ? ctx.restore();
? ? }
? ? function starPath(ctx) {
? ? ? ? ctx.beginPath();
? ? ? ? for (var i = 0; i < 5; i++) {
? ? ? ? ? ? ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),
? ? ? ? ? ? ? ? ? -Math.sin((18+i*72)/180*Math.PI));
? ? ? ? ? ? ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
? ? ? ? ? ? ? ? ? -Math.sin((54+i*72)/180*Math.PI)*0.5);
? ? ? ? }
? ? ? ? ctx.closePath();
? ? }
? </script>
</body>
</html>
查看全部 -
圖形變換： 位移、大小、縮放。
context.translate(x, y);?默認(rèn)多個(gè)translate會(huì)疊加。
save();?restore(); 成對(duì)出現(xiàn)，中間繪圖狀態(tài)不會(huì)對(duì)后面造成影響。
查看全部 -
繪制矩形api：?
ctx.beginPath(); ctx.rect(x,?y,?width,?height); ctx.closePath(); ctx.stroke(); ctx.fillRect(x,?y,?width,?height); ctx.strokeRect(x,?y,?width,?height);
fillStyle 和 strokeStyle 支持所有CSS支持的顏色表示。
查看全部 -
封閉多邊形的首尾交點(diǎn)會(huì)有缺口，使用?context.closePath()?能解決這個(gè)問題。
繪制封閉多邊形最好成對(duì)使用??beginPath();?和?closePath();?
先繪制線條再填充顏色，邊框的一半會(huì)被填充色覆蓋。所以先繪制填充色再描邊。
查看全部 -
context.font = "bold 40px Arial"(粗框,40px大小,字體)
context.fillStyle="#058"顏色
context.fillText(string,x,y,[maxlen](文字的最長寬度))
context.strokeText(string,x,y,[maxlen])(只有外邊框的文字)
查看全部 -
context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)
context.arcTo(x1,y1,x2,y2,radius)
context.quadraticCurveTo(x1,y1,x2,y2)
context.bezeirCurveTo(x1,y1,x2,y2,x3,y3);
查看全部 -
畫star，按照三角函數(shù)來算
查看全部 -
lineCap：設(shè)置線條兩段的形狀
butt(default)
round
square
lineCap:只能用于線段的開始處和結(jié)尾處，不能用于連接處。
查看全部 -
translate()用于改變坐標(biāo)原點(diǎn)的位置，每次調(diào)用這個(gè)接口時(shí)，應(yīng)該還原回去（狀態(tài)疊加）。
save()和restore()成對(duì)出現(xiàn)，可以保存當(dāng)前繪圖狀態(tài)并還原成繪圖之前的狀態(tài)，節(jié)省了很多麻煩
查看全部 -
處理線條間的連接處用lineJoin，一共有三個(gè)值：miter（默認(rèn)，尖角）、bevel（斜接）、round（圓角）
materLimit用來限制內(nèi)角與外角間最大的距離（默認(rèn)是10），一旦超過這個(gè)距離就會(huì)使用bevel的銜接方式
只有在非常需要表現(xiàn)非常尖銳的角時(shí)，才會(huì)使用到materLimit
查看全部 -
lineCap設(shè)置線條的帽子：butt（默認(rèn)）、round、square。后兩者繪制出的線條都要長一些（戴上了帽子）。lineCap適用于線條的起始處和結(jié)尾處不適用于連接處。
通常繪制一個(gè)封閉的多邊形用beginPath()和closePath()（推薦），但也可以不用closePath()而用lineCap = “square”來實(shí)現(xiàn)
查看全部 -
五角星的凹點(diǎn)在內(nèi)圓上，凸點(diǎn)在外圓上。
canvas畫布的坐標(biāo)系相較于笛卡爾坐標(biāo)系X軸正指向不變，Y軸正方向向下
查看全部 -
常常beginPath()和closePath()成對(duì)兒地出現(xiàn)用來繪制一個(gè)封閉的多邊形，這是標(biāo)準(zhǔn)做法。
closePath()會(huì)自動(dòng)把最后一個(gè)點(diǎn)與第一個(gè)點(diǎn)連接在一起
當(dāng)需要繪制一個(gè)要描邊兒的圖形時(shí)，應(yīng)該先填充顏色，再描邊兒
canvas是基于狀態(tài)的繪制，因此推薦把路徑寫在一起，把狀態(tài)寫在一起，再把繪制寫在一起
查看全部 -
beginPath()開啟一個(gè)全新的狀態(tài)，beginPath() + lineTo() 相當(dāng)于moveTo()
查看全部
舉報(bào)