简单html5基础标签实例,HTML5-canvas标签结合简单实例讲解

关于Canvas的简单介绍

元素是HTML5中的新元素，该标签只是图形容器，需要使用脚本语言来绘制图形。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素.

注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 元素.

创建一个简单的画布

【源代码】

canvas

.ca{

border:1px solid #008B8B;

}

var cvsc = document.getElementById("myCanvas-color"); //获取画布id为myCanvasvar

var ctxc = cvsc.getContext('2d');//获取绘图2D环境

ctxc.fillStyle = "#008B8B";//不写这句，会默认显示黑色

ctxc.fillRect(20,20,200,100);//必须有，fillRect(x,y,width,height)方法定义了矩形当前的填充方式

//其中x表示“矩形x坐标”；

//y表示“矩形y坐标”；

//width为矩形的宽；

//height为矩形的高；

【效果图】

【知识点】

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或图案。

值

描述

color

指示绘图填充色的 CSS 颜色值。默认值是 #000000。

gradient

用于填充绘图的渐变对象(线性或 放射性)。

pattern

用于填充绘图的 pattern 对象。

Canvas - 渐变

下面是线性渐变简单实例

【源代码】

canvas

.ca{

border:1px solid #008B8B;

}

var cvsg = document.getElementById("myCanvas-grandient");

var ctxg = cvsg.getContext("2d");

var grd = ctxg.createLinearGradient(0,0,0,130);

//JavaScript语法context.createLinearGradient(x0,y0,x1,y1);

//其中x0表示“渐变开始点的x坐标”；

//y0表示“渐变开始点的 y 坐标”；

//x1表示“渐变结束点的 x 坐标”；

//y1表示“渐变结束点的 y 坐标”；

//补充：当其他值为0，x1大于0时为从左向右渐变；

//当其他值为0，y1大于0时为从上到下渐变；

grd.addColorStop(0,"#008B8B");

grd.addColorStop(0.2,"#458B74");

grd.addColorStop(0.4,"#458B74");

grd.addColorStop(0.6,"#00EE76");

grd.addColorStop(0.8,"#FFD700");

grd.addColorStop(1,"#CD9B1D");

ctxg.fillStyle=grd;

ctxg.fillRect(20,20,200,120);

【效果图】

【知识点】

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

使用格式：addColorStop(0~1,color);

下面是放射性渐变简单实例

【源代码】

canvas

.ca{

border:1px solid #008B8B;

}

var cvsr = document.getElementById("myCanvas-radial");

var ctxr = cvsr.getContext("2d");

var grd = ctxr.createRadialGradient(75,50,5,90,60,100);

//JavaScript语法context.createRadialGradient(x0,y0,r0,x1,y1,r1);

//其中x0表示“渐变的开始圆的 x 坐标”；

//y0表示“渐变的开始圆的 y 坐标”；

//r0表示“开始圆的半径”；

//x1表示“渐变的结束圆的 x 坐标”；

//y1表示“渐变的结束圆的 y 坐标”；

//r1表示“结束圆的半径”；

grd.addColorStop(0,"#008B8B");

grd.addColorStop(0.2,"#458B74");

grd.addColorStop(0.4,"#458B74");

grd.addColorStop(0.6,"#00EE76");

grd.addColorStop(0.8,"#FFD700");

grd.addColorStop(1,"#CD9B1D");

ctxr.fillStyle=grd;

ctxr.fillRect(20,20,200,120);

【效果图】

Canvas - 绘制图形简单实例

【源代码】

canvas

.ca{

border:1px solid #008B8B;

}

var cvs = document.getElementById("myCanvas-line");

var ctxl = cvs.getContext("2d");

ctxl.moveTo(20,20); //moveTo(x,y) 定义线条开始坐标;

ctxl.lineTo(20,100); //lineTo(x,y) 定义线条结束坐标;

ctxl.lineTo(100,100);

ctxl.lineTo(100,20);

ctxl.lineTo(20,20);

ctxl.stroke(); //使用 stroke() 方法来绘制线条:

【效果图】

如果你看懂了试着思考一下下面的图形怎么绘制吧~大胆尝试

Canvas - 图案

【源代码】

canvas

.ca{

border:1px solid #008B8B;

}

var cvsp = document.getElementById("myCanvas-pattern");

var ctxp = cvsp.getContext("2d");

var img = document.getElementById("lamp");

//方法一开始：

var pat = ctxP.createPattern(img,"no-repeat");//可以设置图片重复方式

ctxP.rect(0,0,150,100);

ctxP.fillStyle=pat;

ctxP.fill();

//方法一结束；

//如果方法一没有显示出效果，将方法一部分内容注释掉，尝试方法二：

// img.onload = function(){

// ctxp.drawImage(img,10,10);

// }

【效果图】

Canvas - 文本

【源代码】

canvas

.ca{

border:1px solid #008B8B;

}

var cvs = document.getElementById("myCanvas-text");

var ctext = cvs.getContext("2d");

ctext.font = "30px Arial";

ctext.strokeText("我真帅!",20,100);

//fillText定义实心的文本；

//JavaScript语法：stroke(text,x,y)；

//其中text为显示文本；x表示“文本的x坐标”；

//y表示“文本的y坐标”；

【效果图】

Canvas - 渐变色文本

【源代码】

canvas

.ca{

border:1px solid #008B8B;

}

var cvsT = document.getElementById("myCanvasText");

var ctxT = cvsT.getContext("2d");

var grd = ctxT.createLinearGradient(0,0,cvsT.width,0);

grd.addColorStop(0,"#cb1310");

grd.addColorStop(0.2,"#cb3b10");

grd.addColorStop(0.4,"#cb7b10");

grd.addColorStop(0.6,"#cbaa10");

grd.addColorStop(0.8,"#c7cb10");

grd.addColorStop(1,"#72cb10");

ctxT.font = "50px myFirstFont";

ctxT.fillStyle=grd;

ctxT.fillText("JavaScript",10,110);

【效果图】

更多内容详情请查看链接点击打开链接