html5 Canvas描画のサンプルコードの詳細説明(3)-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

html5 Canvas描画のサンプルコードの詳細説明(3)

黄舟

Mar 28, 2017 pm 03:40 PM

この記事では、主に html5 canvas のグラフィックの塗りつぶし機能の応用について説明します。主に、基本的な色の定義 (Basic Colors)、グラデーション (Gradient)、パターン (Pattern)、およびシャドウ (Shadow) について説明します。

まず、以下のすべての操作を実装する基本的なコードセグメントを投稿します:

Base Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}

function eventWindowLoaded() {
canvasApp();
}

function canvasSupport() {
return Modernizr.canvas;
}

function canvasApp() {
//是否支持CANVAS判断
if(!canvasSupport()) {
return;
}
//取Canvasvar
theCanvas = document.getElementById("canvasOne");
//获取绘图环境context
var context = theCanvas.getContext("2d");
//绘图方法的实现
function drawScreen() {}
//绘图方法调用执行
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; border:1px solid #0000ff">
<canvas id="canvasOne" width="550" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

ログイン後にコピー

以下のすべてのサンプルコードについては、上記の関数drawScreen()を置き換えるだけです。

基本色基本色

html5 は

strings を使用した RGB 値の置換をサポートしています。主要な色は基本色:

です。

黒 = #000000 グリーン = #008000 シルバー = #C0C0C0 ライム = #00FF00 グレー = #808080
オリーブ = #808000 ホワイト = #FFFFFF イエロー = #FFFF00 マルーン= #800000
ネイビー = #000080 レッド = #FF0000 ブルー = #0000FFパープル = #800080
ティール = #008080 フクシア = #FF0 0FF アクア = #00FFFF

例: context .

fillStyle="#000000"; または context.fillStyle="black"; グラデーショングラデーションには主に 2 つのタイプがあります

線形グラデーションライン -タイプグラデーション、Radial Gradients 放射状グラデーション、グラデーション垂直グラデーション、斜めグラデーションインスタンス効果:

context.createLinearGradient(x1 ,y1, x2,y2)このメソッドは、次の 4 つのパラメーターを含む線形グラデーションオブジェクトを作成するために使用されます: グラデーションの開始点の座標 (x1, y1)、グラデーションの終了点の座標 (x2, y2) ;

在上在例子中，.createLinearGradient(0,0,100,0);两个点的Y坐标都是0，表示是水平渐变；

若是.createLinearGradient(0,0,0,100);两个点的X坐标都是0，Y坐标在发生变化，则表示为垂直渐变；

若是.createLinearGradient(0,0,100,100);同表示对角线线向渐变；

.addColorStop(position,'rgb')该方法是为渐变添加颜色；包括二个参数：代表颜色要使用的位置（position），第二个代表颜色的rgb值；

其中，position值的范围是[0.0---1.0],我们可以理解为定义的渐变范围的一个百分比表示；

context.fillStyle用来设置填充颜色或者渐变风格；

Linear gradient渐变也可用于描边时使用，设置线框的风格即可：strokeStyle

水平渐变 边框

function drawScreen() {
var linearGradient = context.createLinearGradient(0, 0, 60, 0);
linearGradient.addColorStop(0,&#39;rgb(255,0,0)&#39;);
linearGradient.addColorStop(.5,&#39;rgb(0,255,0)&#39;);
linearGradient.addColorStop(1,&#39;rgb(0,0,255)&#39;);
context.strokeStyle = linearGradient;
context.strokeRect(0, 0,60,60);
}

ログイン後にコピー

径向渐变Radial gradients

径向渐变能过contect.createRadialGradient(x1,y1,radius1,x2,y2,radius2)来创建;

包括6个参数：两个圆的参数，第一个圆的圆心（x1,y1）,半径radius1;第二个圆的圆心（x2,y2）,半径radius2;

Radial gradients

function drawScreen() {
var radialGradient = context.createRadialGradient(70, 70, 10,100,100,70);
radialGradient.addColorStop(0,&#39;rgb(255,0,0)&#39;);
radialGradient.addColorStop(.5,&#39;rgb(0,255,0)&#39;);
radialGradient.addColorStop(1,&#39;rgb(0,0,255)&#39;);
context.fillStyle = radialGradient;
context.fillRect(0, 0,200,200);
}

ログイン後にコピー

实例效果：

创建radial gradient渐变时，两个圆点也可以相同，大家自己试试效果。。嘿嘿！

radial gradient渐变也可用于描边时使用，设置线框的风格即可：strokeStyle

Pattern 图案

用图案填充形状，就是用图片来填充图形；

通过context.createPattern(image,repeat)来实现，两个参数，分别代表：图片实例、第二个是个字符串类型的，指是否重复；

repeat主要包含四个选项：repeat、repeat-x、repeat-y、no-repeat

Pattern

function drawScreen() {
var fillImg = new Image();
fillImg.src = &#39;pattern.png&#39;;
fillImg.onload = function(){
var fillPattern = context.createPattern(fillImg,&#39;repeat&#39;);
context.fillStyle = fillPattern;
context.fillRect(0,0,500,200);
}
}

ログイン後にコピー

实例效果(实例中包含的一上图片”pattern.png“)：

其它的重复效果，大家自己试试，嘿嘿…………

Shadow投影效果

给图形添加投影效果。先看看实例吧；

Shadow

function drawScreen() {
context.fillStyle = &#39;red&#39;;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = &#39;black&#39;;
context.shadowBlur = 10;
context.fillRect(10,10,400,100);
}

ログイン後にコピー