html5怎么用画布做游戏,HTML5画布使用方法

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

画布

window.onload = function() {

// 画布1

var c=document.getElementById("myCanvas1");

var cxt=c.getContext("2d");

var grd=cxt.createLinearGradient(0,0,0,150); //方法创建线性的渐变对象(只代表渐变与图像大小无关)

grd.addColorStop(0,"#000"); //渐变起始颜色

grd.addColorStop(0.5,"#ccc"); //一半时的颜色

grd.addColorStop(1,"#fff"); //终点颜色

cxt.fillStyle=grd;

cxt.fillRect(0,0,150,100); //绘制一个填充颜色的矩形1x，2y，3宽度，4高度

// 画布2

var c=document.getElementById("myCanvas2");

var cxt=c.getContext("2d");

cxt.moveTo(10,10); //线的起点

cxt.lineTo(150,50); //第一个点的坐标，线会直接连过去

cxt.lineTo(10,50); //第二个点的坐标

cxt.stroke();

// 画布3

var c=document.getElementById("myCanvas3");

var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,150,0); //方法创建线性的渐变对象

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

ctx.strokeStyle=gradient;

ctx.lineWidth=5; //宽度

ctx.strokeRect(5,5,150,100); //该方法按照指定的位置和大小绘制一个矩形的边框(但并不填充矩形的内部)。

// 画布4

var c=document.getElementById("myCanvas4");

var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,150,50); //方法创建线性的渐变对象

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

ctx.strokeStyle=gradient;

ctx.font="30px 宋体";

ctx.strokeText("我勒个去",0,50); //方法在画布上绘制文本(没有填色)。文本的默认颜色是黑色。内容和开始位置

//提示：请使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。

// 画布5

var c=document.getElementById("myCanvas5");

var ctx=c.getContext("2d");

var grd=ctx.createRadialGradient(75,80,5,75,80,60); //方法创建放射状/圆形渐变对象。x0 渐变的开始圆的 x 坐标 y0 渐变的开始圆的 y 坐标 r0 开始圆的半径 x1 渐变的结束圆的 x 坐标 y1 渐变的结束圆的 y 坐标 r1 结束圆的半径

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,220); //方法绘制“已填色”的矩形

// 画布6

var c=document.getElementById("myCanvas6");

var ctx=c.getContext("2d");

ctx.fillStyle="#000"; //填充色

ctx.fillRect(0,0,150,100); //方法绘制“已填色”的矩形

ctx.clearRect(50,25,50,50); //清空给定矩形内的指定像素。1 要清除的矩形左上角的 x 坐标 2 要清除的矩形左上角的 y 坐标 3要清除的矩形的宽度，以像素计 4要清除的矩形的高度，以像素计

ctx.clearRect(110,76,10,10);

// 画布7

var c=document.getElementById("myCanvas7");

var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,150,50); //方法创建线性的渐变对象

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

ctx.fillStyle=gradient;

ctx.font="30px 宋体";

ctx.fillText("我勒个去",0,50); //在画布上绘制填色的文本。文本的默认颜色是黑色。

// 画布8

var c=document.getElementById("myCanvas8");

var ctx=c.getContext("2d");

ctx.fillStyle="red";

ctx.fillRect(20,20,75,50);

// 调节透明度

ctx.globalAlpha=0.3;

ctx.fillStyle="blue";

ctx.fillRect(50,50,75,50);

ctx.fillStyle="green";

ctx.fillRect(80,80,75,50);

};

Your browser does not support the canvas element.

Your browser does not support the canvas element.

Your browser does not support the canvas element.

Your browser does not support the HTML5 canvas tag.

Your browser does not support the HTML5 canvas tag.

Your browser does not support the HTML5 canvas tag.

Your browser does not support the HTML5 canvas tag.

Your browser does not support the HTML5 canvas tag.

style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />