<html5 canvas>fillStyle属性和strokeStyle属性

来源：互联网发布：悦木之源知乎编辑：程序博客网时间：2024/05/17 20:26

（《HTML5 Canvas核心技术图形／动画与游戏开发》学习［2］）

fillStyle: 设置填充图形的颜色，渐变和模式。

strokeStyle: 设置用于笔触（描边）的颜色，渐变和模式。

用法一：设置颜色。属性值可以是任意有效的css颜色字串（RGB, RGBA, HSLA, 指定颜色名称）。

示例：#ffffff, rgba(100,100,100,0.8), rgb(255,255,0), hsla(40,82%,33%,0.6), burlywood, cadetblue等。。。。

用法二：设置渐变色和图案。

线性渐变示例：

var gradient=context.createLinearGradient(0,0,canvas.width,0);gradient.addColorStop(0,'blue');gradient.addColorStop(0.25,'white');gradient.addColorStop(0.5,'purple');gradient.addColorStop(0.75,'red');gradient.addColorStop(1,'yellow');context.fillStyle=gradient;context.rect(0,0,canvas.width,canvas.height);context.fill();

其中，createLinearGradient()的四个参数按顺序为：渐变开始点的x坐标，渐变开始点的y坐标，渐变结束点的x坐标，渐变结束点的y坐标。

放射渐变示例：

var gradient=context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);

和线性渐变只有gradient变量不同，createRadialGradient()参数为：渐变的开始圆的x坐标，渐变的开始圆的y坐标，开始圆的半径，渐变的结束圆的x坐标，渐变的结束圆的y坐标，结束圆的半径。

图案示例：

// JavaScript Documentvar canvas=document.getElementById('canvas'),context=canvas.getContext('2d'),repeatRadio=document.getElementById('repeatRadio'),repeatXRadio=document.getElementById('repeatXRadio'),repeatYRadio=document.getElementById('repeatYRadio'),noRepeatRadio=document.getElementById('noRepeatRadio'),image=new Image();function fillCanvasWithPattern(repeatString){var pattern=context.createPattern(image,repeatString);context.clearRect(0,0,canvas.width,canvas.height);context.fillStyle=pattern;context.fillRect(0,0,canvas.width,canvas.height);context.fill();}repeatRadio.onclick=function(e){fillCanvasWithPattern('repeat');};repeatXRadio.onclick=function(e){fillCanvasWithPattern('repeat-x');};repeatYRadio.onclick=function(e){fillCanvasWithPattern('repeat-y');};noRepeatRadio.onclick=function(e){fillCanvasWithPattern('no-repeat');};image.src='babe.png';image.onload=function(e){fillCanvasWithPattern('repeat');};

.createPattern()语法：context.createPattern(要使用的图片，画布或者视频等元素，“重复方式”)

0 0