canvas画图集合

<! DOCTYPE html >

< html lang = "en" >

< head >

< title > 渐变图形 </ title >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width=device-width, initial-scale=1" >

</ head >

< body onload = "draw8()" >

< p > 绘制渐变图形 </ p >

< p > 渐变是在填充是从一种颜色慢慢的过渡到另一种颜色 </ p >

< canvas id = "canvas" ></ canvas >

< script >

// 绘制线性渐变

function draw () {

var canvas = document . getElementById ( "canvas" );

if (canvas == null ) {

return false ;

}

var context = canvas . getContext ( '2d' );

//线性渐变函数的参数 createLinearGradient(xStart,yStart,xEnd,yEnd)

//颜色设定：context.addColorStop(offset,color)

var gl = context . createLinearGradient ( 0 , 0 , 0 , 300 );

gl . addColorStop ( 0 , 'rgb(255,255,0)' );

gl . addColorStop ( 1 , 'rgb(0,255,255)' );

context . fillStyle = gl;

context . fillRect ( 0 , 0 , 300 , 300 );

var n = 0 ;

var g2 = context . createLinearGradient ( 0 , 0 , 300 , 0 );

g2 . addColorStop ( 0 , 'rgba(0,0,255,0.5)' );

g2 . addColorStop ( 1 , 'rgba(255,0,0,0.5)' );

for ( var i = 0 ; i < 10 ; i ++ ) {

context . beginPath ();

context . fillStyle = g2;

context . arc (i * 25 , i * 25 , i * 10 , 0 , Math .PI * 2 , true );

context . closePath ();

context . fill ();

}

}

// 绘制径向渐变

// context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

// 圆心的横纵坐标和半径的开始和结尾的位置

function draw1 () {

var canvas = document . getElementById ( "canvas" );

if (canvas == null ) {

return false ;

}

var context = canvas . getContext ( '2d' );

var gl = context . createRadialGradient ( 400 , 0 , 0 , 400 , 0 , 400 );

gl . addColorStop ( 0.1 , 'rgb(255,255,0)' );

gl . addColorStop ( 0.3 , 'rgb(255,0,255)' );

gl . addColorStop ( 1 , 'rgb(0,255,255)' );

context . fillStyle = gl;

context . fillRect ( 0 , 0 , 400 , 300 );

var n = 0 ;

var g2 = context . createRadialGradient ( 250 , 205 , 0 , 250 , 250 , 300 );

g2 . addColorStop ( 0.1 , 'rgba(255,0,0,0.5)' );

g2 . addColorStop ( 0.7 , 'rgba(255,255,0,0.5)' );

gl . addColorStop ( 1 , 'rgba(0,0,255,0.5)' );

for ( var i = 0 ; i < 10 ; i ++ ) {

context . beginPath ();

context . fillStyle = g2;

context . arc (i * 25 , i * 25 , i * 10 , 0 , Math .PI * 2 , true );

context . closePath ();

context . fill ();

}

}

// 绘制变形图形:平移translate(x,y) 扩大context.scale() 旋转context.rotate()

function draw2 () {

var canvas = document . getElementById ( "canvas" );

if (canvas == null ) {

return false ;

}

var context = canvas . getContext ( '2d' );

context . fillStyle = "#EEEEFF" ;

context . fillRect ( 0 , 0 , 400 , 300 );

// 图形绘制

context . translate ( 150 , 0 );

context . fillStyle = 'rgba(255,0,0,0.25)' ;

for ( var i = 0 ; i < 50 ; i ++ ) {

// 平移 扩大 旋转都用到了

context . translate ( 25 , 25 );

context . scale ( 0.95 , 0.95 );

context . rotate ( Math .PI / 10 );

context . fillRect ( 0 , 0 , 100 , 50 );

}

}

// 坐标变换与路径结合使用

function draw3 () {

var canvas = document . getElementById ( "canvas" );

if (canvas == null ) {

return false ;

}

var context = canvas . getContext ( '2d' );

context . fillStyle = "#EEEEFF" ;

context . fillRect ( 0 , 0 , 400 , 300 );

// 图形绘制

context . translate ( 100 , 0 );

for ( var i = 0 ; i < 50 ; i ++ ) {

context . translate ( 25 , 25 );

context . scale ( 0.95 , 0.95 );

context . rotate ( Math .PI / 10 );

create5Star (context);

context . fill ();

}

}

function create5Star ( context ) {

var n = 0 ;

var dx = 100 ;

var dy = 0 ;

var s = 50 ;

// 创建路径

context . beginPath ();

context . fillStyle = 'rgba(255,0,0,0.5)' ;

var x = Math . sin ( 0 );

var y = Math . cos ( 0 );

var dig = Math .PI / 5 * 4 ;

for ( var i = 0 ; i < 5 ; i ++ ) {

var x = Math . sin (i * dig);

var y = Math . cos (i * dig);

context . lineTo (dx + x * s, dy + y * s);

}

context . closePath ();

}

// 矩阵变换

function draw4 () {

var canvas = document . getElementById ( "canvas" );

if (canvas == null ) {

return false ;

}

var context = canvas . getContext ( '2d' );

// 定义颜色

var colors = [ "red" , "orange" , "yellow" , "green" , "blue" , "navy" , "purple" ];

context . lineWidth = 10 ;

context . transform ( 1 , 0 , 0 , 1 , 100 , 0 );

// 循环绘制圆弧

for ( var i = 0 ; i < colors . length ; i ++ ) {

// 定义每次向下移动10个像素的变换矩阵

context . transform ( 1 , 0 , 0 , 1 , 0 , 10 );

context . strokeStyle = colors[i];

context . beginPath ();

context . arc ( 50 , 100 , 100 , 0 , Math .PI, true );

context . stroke ();

}

}

// 绘制文字

function draw5 () {

var canvas = document . getElementById ( "canvas" );

if (canvas == null ) {

return false ;

}

var context = canvas . getContext ( '2d' );

context . fillStyle = '#00f' ;

context . font = 'italic 30px sans-serif' ;

context . textBaseline = 'top' ;

context . fillText ( 'hello world' , 0 , 0 );

context . font = 'bold 30px sans-serif' ;

context . strokeText ( '示例文字' , 0 , 50 );

}

// 测量文字的宽度

// metrics = context.measureText(text);

function draw6 () {

var canvas = document . getElementById ( "canvas" );

if (canvas == null ) {

return false ;

}

var context = canvas . getContext ( '2d' );

// 定制绘制文字

var txt = "世界那么大，我想去看看" ;

// 获取文字的宽度

var tm1 = context . measureText (txt);

// 绘制文字

context . fillText (txt, 10 , 30 );

// 改变字体

context . font = 'bold 10px sans-serif' ;

// 重新获取文字的宽度

var tm2 = context . measureText (txt);

context . fillText (txt, 10 , 70 );

context . fillText ( tm2 . width , tm2 . width + 10 , 70 );

}

// 保存文件

// 原理：实际上是把当前的绘画状态输出到一个dataurl地址所指向的数据中的过程

// canvas.toDataURL(type)

function draw7 () {

var canvas = document . getElementById ( "canvas" );

if (canvas == null ) {

return false ;

}

var context = canvas . getContext ( '2d' );

context . fillStyle = "rgb(0,0,255)" ;

context . fillRect ( 0 , 0 , canvas . width , canvas . height );

context . fillStyle = "rgb(255,255,0)" ;

context . fillRect ( 10 , 20 , 50 , 50 );

window . location = canvas . toDataURL ( "image / jpeg" );

}

// 简单动画的制作

// 实际上就是：不断擦除、重绘的一个过程

var context;

var width, height;

var i;

function draw8 () {

var canvas = document . getElementById ( "canvas" );

if (canvas == null ) {

return false ;

}

context = canvas . getContext ( '2d' );

width = canvas . width ;

height = canvas . height ;

i = 0 ;

setInterval (rotate, 100 );

}

function rotate () {

context . clearRect ( 0 , 0 , width, height);

context . fillStyle = "red" ;

context . fillRect (i, 0 , 20 , 20 );

i = i + 20 ;

}

< / script >

</ body >

</ html >