html5 Canvas 그리기 샘플 코드에 대한 자세한 설명(3)
- 黄舟원래의
- 2017-03-28 15:40:451214검색
이 글에서는 주로 html5 캔버스에서 그래픽의 채우기 기능 적용에 대해 다루고 있으며, 주로 기본 색상 정의(Basic Colors), 그라데이션(Gradient), 패턴 등을 포함합니다. , 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 문자열을 사용하여 RGB 값을 대체하는 것을 지원하는 색상은 주로 기본 색상입니다:
검정색 = #000000 녹색 = #008000 은색 = #C0C0C0 라임=#00FF00
회색 = #808080 올리브 = # 80800 0 = #FF0000 blue = #0000FF
보라색 = #800080 청록색 = #008080 자홍색 = # FF00FF aqua = #00FFFF
예: context.fillStyle="#000000" 또는 context.fillStyle=" black"; context.StrokeStyle
그라디언트
그라디언트에는 두 가지 주요 유형이 있습니다.
선형 그라디언트, 방사형 그라디언트
선형 그라디언트에는 선형 수평 그라디언트, 수직 그라디언트 및 대각선 그라디언트가 포함됩니다.
아아아아인스턴스 효과:
context.createLinearGradient(x1,y1,x2,y2)
이 메소드는 4개의 매개변수를 포함하는 선 그라데이션 객체를 생성하는 데 사용됩니다. 🎜> 在上在例子中，.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 径向渐变Radial gradients 径向渐变能过contect.createRadialGradient(x1,y1,radius1,x2,y2,radius2)来创建; 包括6个参数：两个圆的参数，第一个圆的圆心（x1,y1）,半径radius1;第二个圆的圆心（x2,y2）,半径radius2; 实例效果： 创建radial gradient渐变时，两个圆点也可以相同，大家自己试试效果。。嘿嘿！ radial gradient渐变也可用于描边时使用，设置线框的风格即可：strokeStyle Pattern 图案 用图案填充形状，就是用图片来填充图形； 通过context.createPattern(image,repeat)来实现，两个参数，分别代表：图片实例、第二个是个字符串类型的，指是否重复； repeat主要包含四个选项：repeat、repeat-x、repeat-y、no-repeat 实例效果(实例中包含的一上图片”pattern.png“ 其它的重复效果，大家自己试试，嘿嘿………… Shadow投影效果 给图形添加投影效果。先看看实例吧； Shadow主要用于四个属性： context.shadowOffsetX ：代表投影在X方向的偏移量，向正负分别代表，向右向左；大小代表偏移值； context.shadowOffsetY ：代表投影在Y方向的偏移量，向正负分别代表，向下向上；大小代表偏移值； context.shadowBlur ：代表投影模糊效果的大小 context.shadowColor:代表投影的颜色，rgb值（"black"\"#000000"\"rgb(0,0,0)"）； 
그라데이션 시작점의 좌표(x1, y1), 그라데이션 끝점의 좌표(x2, y2);水平渐变 边框
function drawScreen() {
var linearGradient = context.createLinearGradient(0, 0, 60, 0);
linearGradient.addColorStop(0,'rgb(255,0,0)');
linearGradient.addColorStop(.5,'rgb(0,255,0)');
linearGradient.addColorStop(1,'rgb(0,0,255)');
context.strokeStyle = linearGradient;
context.strokeRect(0, 0,60,60);
}Radial gradients
function drawScreen() {
var radialGradient = context.createRadialGradient(70, 70, 10,100,100,70);
radialGradient.addColorStop(0,'rgb(255,0,0)');
radialGradient.addColorStop(.5,'rgb(0,255,0)');
radialGradient.addColorStop(1,'rgb(0,0,255)');
context.fillStyle = radialGradient;
context.fillRect(0, 0,200,200);
}
Pattern
function drawScreen() {
var fillImg = new Image();
fillImg.src = 'pattern.png';
fillImg.onload = function(){
var fillPattern = context.createPattern(fillImg,'repeat');
context.fillStyle = fillPattern;
context.fillRect(0,0,500,200);
}
}
)：
Shadow
function drawScreen() {
context.fillStyle = 'red';
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'black';
context.shadowBlur = 10;
context.fillRect(10,10,400,100);
}
위 내용은 html5 Canvas 그리기 샘플 코드에 대한 자세한 설명(3)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!