HTML5游戏开发之Canvas 开发入门

HTML5游戏开发之Canvas 游戏开发基础入门

默认教学计划
661人加入学习
(2人评价)
价格 ¥80.00
教学计划
该课程属于 HTML5游戏入门套餐 请加入后再学习

//js

//创建

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

var content = canvas.getContent("2d");


//绘制图片

//drawImage 3 个参数 img,x,y
context.drawImage(img, 0, 0);
//drawImage 5 个参数 img,x,y,w,h
context.drawImage(img, 0, 270, 100, 100);
//drawImage 9 个参数 img,sx,xy,sw,sh,dx,dy,dw,dh
context.drawImage(img, 55, 80, 100, 100, 120, 270, 100, 100);

//绘制背景

var pattern = context.createPattern(bloackBG, "repeat-y");
context.rect(0, 0, cW, cH);
context.fillStyle = pattern;
context.fill();


//绘制文字

context.font = "italic bold 48px 黑体";

context.fillStyle = "#ff0000";

context.fillText("Count:" + count, 10, 10);

//描边绘制文本

context.strokeStyle = "#0000ff";

context.strokeText("Count:" + count, 10, 10);





[展开全文]

// 环境建立

var context = canvas.getContext("2d")

 

在canvas里显示网络图片,

要等图片加载完成,即onload事件里面

drawImage,

3个参数,图片对象,x,y

5个参数,图片对象,x,y,宽,高

9个参数,图片对象,裁剪位置x,裁剪位置y,裁剪宽,裁剪高,放置x,放置y,图片宽,图片高

[展开全文]

console.log //控制台输入消息

context.clearRect(x,y,z,t)//清屏

[展开全文]
 var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    setInterval(drawFill,1000/60);
    setInterval(drawStroke,1000);
var r=0;
function drawFill(){
    r+=Math.PI/360;
    context.arc(300,300,100,0,r);
    context.fillStyle="#3e3e3e";
    context.fill();
}
function drawStroke(){
    context.rect(120,120,100,100);
    context.strokeStyle="#336699";
    context.stroke();
}
[展开全文]
jimo · 1970-01-01 · 绘制图形 0
 setInterval(drawText,1000/60);
    var count=0;
function drawText(){
    context.clearRect(0,0,420,400);
    count++;
    //实心
    context.font="48px 黑体";
    context.fillStyle="#ff0000";
    context.fillText("count:"+count,100,100);
    //描边
    context.strokeStyle="blue";
    context.strokeText("count:"+count,100,200);
}
[展开全文]
jimo · 1970-01-01 · 绘制文本 0
function drawBG(){
    var pattern=context.createPattern(img,"repeat-x");
    context.rect(0,0,420,600);
    context.fillStyle=pattern;
    context.fill();
[展开全文]
jimo · 1970-01-01 · 图像平铺 0
window.onload=init;
var context;
var CW=420,CH=600;
function init(){
    console.log("so it begins");
    var canvas=document.getElementById("canvas");
    context=canvas.getContext("2d");
    var X=0;
    var img=new Image();
    img.src="res/小咪1.jpg";
    function gameLoop(){
        X+=2;
        context.drawImage(img,X,0,100,100);
    }
    function gameTick(){
        clearScreen();
        gameLoop();
    }
    function clearScreen(){
        context.clearRect(0,0,CW,CH);
    }
    //主循环
    setInterval(gameTick,1000/60);
}

[展开全文]
 var img=new Image();
    img.src="res/小咪1.jpg";

    img.onload=function(){
        //三个参数:img,x,y
        //context.drawImage(img,0,0);
        //5个参数:img,x,y,w,h
        context.drawImage(img,0,0,350,400);
        //9个参数:img,sx,sy,sw,sh,dx,dy,dw,dh  裁剪图形
        context.drawImage(img,100,100,100,100,0,450,100,100);
    }
[展开全文]
window.onload=init;
var context;
var CW=420,CH=600;
function init(){
    console.log("so it begins");
    var canvas=document.getElementById("canvas");
    console.log(canvas);
    context=canvas.getContext("2d");
    console.log(context);

}

按这个流程

[展开全文]

授课教师

dzq
泰课联合创始人

课程特色

视频(7)

学员动态

知足 完成了 绘制图形
知足 开始学习 绘制图形
知足 完成了 绘制文本
知足 开始学习 绘制文本
知足 完成了 图像平铺