什么是canvas？

canvas元素用于图形的绘制，通过脚本(js)来完成。canvas元素用于图形的绘制，通过脚本(js)来完成。

Canvas相关函数：

画长方形：

实心：

1. ctx.fillStyle=“#eee”；

2. ctx.fillRect(x坐标，y坐标，宽度值，高度值)；

空心

1. ctx.strokeStyle=”#eee”；

2. ctx. strokeRect(x坐标，y坐标，宽度值，高度值)；

画圆：

实心：

1. ctx .beginPath();

2. ctx.arc(x坐标，y坐标，半径，起始角度，结束角度2*Math.PI);

3. ctx.closePath();

4. ctx.fillStyle=“#eee”;

5. ctx.fill();

空心：

1.ctx.beginPath();

2.ctx.arc(x坐标，y坐标，半径，起始角度，结束角度2*Math.PI);

3.ctx.stroke();

画直线：

1.moveTo(x,y) 定义线条开始坐标，

2.lineTo(x,y) 定义线条结束坐标，

3.用stroke()来绘制线条

文本：

1. ctx.font属性定义字体

2. ctx .fillText(文本,x 坐标,y 坐标).实心的文本

3. ctx .fillText(文本,x 坐标,y 坐标).空心的文本

渐变：

创建线性渐变

ctx.createLinearGradient(起始位置的x坐标,起始位置的y坐标,渐变终点位置x1坐标, 渐变终点位置y1坐标)

创建径向渐变

ctx.createRadialGradient(渐变的开始圆的x坐标, 渐变的开始圆的y坐标,开始圆的半径,渐变的结束圆的x坐标, 渐变的结束圆的 y坐标,结束圆的半径)

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0或1

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制

举个栗子

//创建渐变

var grd=ctx.createRadialGradient(75,5,0,5,90,60,100);

grd.addColorStop(0,” red”);

grd.addColorStop(1,” white”);

//填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80)

图像：

1.img=new Image();

2.img.src=”地址”

3.ctx.drawImage(this.img,0,0)

具体游戏代码看下一篇文章....未完待续

创建第一个属于自己的canvas小游戏（基础知识）相关推荐

开发一个Canvas小游戏实现一个游戏“引擎”
前言这个游戏其实在三四年前就写了,中间还重构过好几次,之前都是用简单的面向对象和函数式编程来写,游戏中的元素关系到还是分的挺开,但是游戏的渲染,运算等逻辑分的不够清晰,整个逻辑基本都是自顶向下的流水 ...
类打地鼠canvas小游戏
HTML代码部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
见缝插针一个canvas小游戏
一个canvas小游戏 https://github.com/Web-ZhangJian/jianfengchazhen JavaScript代码: var canvas=document.query ...
一个类打地鼠的canvas小游戏
html 部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
用C语言实现推箱子小游戏基础程序plus
目录设计一个简单的推箱子游戏功能设计要求: 代码实现数据定义头文件data_def.h 窗口设置头文件WindowsSet.h WindowsSet.cpp 上移函数矩阵旋转函数游戏帧菜单 ...
HTML5 Canvas小游戏
知识点 canvas JavaScript 开发准备代码获取 $ wget https://labfile.oss.aliyuncs.com/courses/361/simple_canvas_ga ...
在水果忍者游戏上做改编的中秋切月饼canvas小游戏
<中秋切月饼游戏> ...
微信小游戏基础讲解微信开发工具
快速上手安装开发工具前往开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装. 你的第一个小游戏新建项目选择小程序项目,选择代码存放的硬盘路径. 目前小游戏不提供公开注册,可点击体验 ...
世界上第一代电子计算机每秒运算次数,计算机基础知识讲稿一
计算机基础知识讲稿计算机基础知识讲稿(一) 一信息与信息社会信息:信息是指用语言.文字.声音.图象.符号.数字等为载体所表达的事物特征,是对事物存在方式.运行状态.相互联系特征的表达与描述. 信 ...

创建第一个属于自己的canvas小游戏（基础知识）