●グラデーション ●パターン ●シャドウ
線形グラデーション（createLinearGradient）と、円形グラデーション（createRadialGradient）です。
背景にグリッドを入れています。グリッドは20pxです。
onload = function() {
gradation();
};
function gradation() {
var cnvs = document.getElementById('canvas1');
var ctx = cnvs.getContext('2d');
/* 横方向の線形グラデーション＿塗り */
/*線形グラデーションを指定*/
var grad = ctx.createLinearGradient(20,0,120,0);
grad.addColorStop(0,'green');
grad.addColorStop(1,'yellow');
/*グラデーション「grad」を塗りに指定して四角形を描く*/
ctx.fillStyle = grad;
ctx.fillRect(20,20,100,100);
/* 縦方向の線形グラデーション＿線 */
/*線形グラデーションを指定*/
var grad2 = ctx.createLinearGradient(0,15,0,125);
grad2.addColorStop(0,'#ff4000');
grad2.addColorStop(0.5,'#ff0');
grad2.addColorStop(1,'#40ff00');
/*グラデーション「grad2」を線に指定して四角形を描く*/
ctx.lineWidth = 10;
ctx.strokeStyle = grad2;
ctx.strokeRect(140,20,100,100);
/* ななめ方向の線形グラデーション＿塗り */
var grad3 = ctx.createLinearGradient(260,20,360,120);
grad3.addColorStop(0,'rgba(77,166,255,1)');
grad3.addColorStop(0.5,'rgba(77,166,255,0)');
grad3.addColorStop(1,'rgba(77,166,255,1)');
ctx.fillStyle = grad3;
ctx.fillRect(260,20,100,100);
/* 円形グラデーション1 */
var grad4 = ctx.createRadialGradient(420,60,0,420,60,66);
grad4.addColorStop(0,'#bbf');
grad4.addColorStop(0.6,'#2626ff');
grad4.addColorStop(1,'#00008c');
ctx.beginPath();
ctx.arc(430, 70, 50, 0, Math.PI*2, false);
ctx.fillStyle = grad4;
ctx.fill();
/* 円形グラデーション2 */
var grad5 = ctx.createRadialGradient(550,70,0,550,70,60);
grad5.addColorStop(0,'rgba(255,128,0,1)');
grad5.addColorStop(0.9,'rgba(255,128,0,0)');
ctx.beginPath();
ctx.arc(550, 70, 60, 0, Math.PI*2, false);
ctx.fillStyle = grad5;
ctx.fill();
}
パターンを作って塗りや線に指定します。
左側のギンガムチェックのパターンは、キャンバスで作ったもの。
右側のドットのパターンは、画像を使っています。
ついでに、シャドウもつけてみました。
onload = function() {
PatternSet();
};
function PatternSet() {
var cnvs2 = document.getElementById('canvas2');
var ctx2 = cnvs2.getContext('2d');
/* パターンで背景にグリッドを描画しています（外部ファイル grid.js） */
var ptrn = ctx2.createPattern(pCnvs, 'repeat');
ctx2.fillStyle = ptrn;
ctx2.fillRect(0,0,280,150);
/* パターンで塗り */
/*ギンガムチェックのパターンになるcanvasを作成*/
var ptCnvs = document.createElement("canvas");
ptCnvs.width = 20;
ptCnvs.height = 20;
var ptCtx = ptCnvs.getContext("2d");
/*背景の白い四角*/
ptCtx.fillStyle = '#fff';
ptCtx.fillRect(0,0,20,20);
/*横ライン2本（透明度0.4の赤に指定）*/
ptCtx.beginPath();
ptCtx.moveTo(0,0);
ptCtx.lineTo(20,0);
ptCtx.moveTo(0,20);
ptCtx.lineTo(20,20);
ptCtx.lineWidth = 10;
ptCtx.strokeStyle = 'rgba(255,0,5,0.4)';
ptCtx.stroke();
/*縦ライン2本（太さやカラーは指定しなくても上と同じ）*/
ptCtx.beginPath();
ptCtx.moveTo(0,0);
ptCtx.lineTo(0,20);
ptCtx.moveTo(20,0);
ptCtx.lineTo(20,20);
ptCtx.stroke();
/*パターン「ptrn2」を塗りに指定して四角形を描く*/
var ptrn2 = ctx2.createPattern(ptCnvs, 'repeat');
ctx2.fillStyle = ptrn2;
/*シャドウの指定*/
ctx2.shadowOffsetX = 5;
ctx2.shadowOffsetY = 5;
ctx2.shadowColor = 'gray';
ctx2.shadowBlur = 5;
ctx2.fillRect(20,20,100,100);
/* パターンで線 */
/*パターンになるimg要素を生成*/
var img = new Image();
img.onload = function () {
var ptrn3 = ctx2.createPattern(img,'repeat');
/*パターン「ptrn3」を線に指定して四角形を描く*/
ctx2.strokeStyle = ptrn3;
ctx2.lineWidth = 20;
/*シャドウの指定（色とぼかし幅だけ書き換えました）*/
ctx2.shadowColor = '#815750';
ctx2.shadowBlur = 10;
ctx2.strokeRect(150,20,100,100);
};
img.src='img/ptrn_dot.gif';
}
drawImage(); の前にシャドウの指定します。
function shadowSet() {
var cnvs3 = document.getElementById('canvas3');
var ctx3 = cnvs3.getContext('2d');
/* イメージを生成 */
var img2 = new Image();
img2.onload = function() {
/*シャドウの指定*/
ctx3.shadowOffsetX = 5;
ctx3.shadowOffsetY = 5;
ctx3.shadowColor = '#999';
ctx3.shadowBlur = 10;
/*画像の描画位置*/
ctx3.drawImage(img2, 0, 0);
/* 引き続き2枚目のイメージ */
/*シャドウの指定を変更*/
ctx3.shadowOffsetX = 10;
ctx3.shadowOffsetY = 10;
ctx3.shadowColor = '#ccc';
ctx3.shadowBlur = 20;
/*画像の描画位置を変更して描画*/
ctx3.drawImage(img2, 250, 0);
};
img2.src = "img/cups.jpg";
}
この画像は 素材辞典（株式会社データクラフト）から使用しています。著作権は株式会社データクラフトにあります。