网页绘图表现非常强大—大型游戏 / 3D。
一、网页绘图的分类
- 特效
视频网站弹幕；雪花飘落；弹出式广告... - 功能
电影网站订座；销售统计图；天气；金融... - 游戏
休闲小游戏；跳一跳；故事类...
二、网页绘制开发方式
- 图形非常复杂，功能简单—可用第三方绘图
D3 — https://d3js.org/
echartsjs — https://www.echartsjs.com/zh/index.html
cocos — https://www.cocos.com/docs/ - 功能非常复杂，图形简单—可自己开发
三、网页中绘图三种技术
- canvas：用像素点组件2D位图图像
特点：颜色非常细腻；
缺点：不能放大和缩小(模糊)。 - svg：用线段组成2D矢量图图像
特点：颜色单调；
优点：可以任意放大和缩小不失真。 - webgl：3D位图
四、canvas (2D位图)
学习canvas特点：单词较多；坐标系；不要使用jquery
五、canvas开发流程 (基础)
1. 通过标签创建画布
<canvas id="c3" width="500" height="400"></canvas>
- canvas 要求标签需要指定高度和宽度，也可以用js指定
- 不能css单独指定宽度和高度，css会对图像缩放
2. 通过js获取画布元素
var c3=document.getElementById("c3")
3. 通过js依据画布元素获取画笔对象
var ctx=c3.getContext("2d")
- 2d：平面图形
- Context：上下文对象(画笔对象)
六、canvas开发—矩形
矩形绘制以左上角为基准点。
- 绘制空心矩形
ctx.strokeRect(x,y,w,h)
//x,y：空心矩形左上角位置
//w,h：空心矩形宽度和高度
- 绘制实心矩形
ctx.fillRect(x,y,w,h)
//四个参数与空心矩形相同
- 清空矩形范围内所有图形(橡皮)
ctx.clearRect(x,y,w,h)
//四个参数与空心矩形相同
//清空画布所有图形 ctx.clearRect(0,0,500,400)
- 设置空心样式
ctx.strokeStyle="#f00"
- 设置实心样式
ctx.fillStyle="#00f"
七、示例
<h3>矩形</h3>
<canvas id="c3" width="500" height="400"></canvas>
<script>
var c3=document.getElementById("c3");
var ctx=c3.getContext("2d");
//上下左右移动矩形
//创建变量表示坐标x,y
var x=0;
var y=0;
//创建变量表示x轴和y轴方向
var xDirection=1;
var yDirection=1;
//创建定时器
var t=setInterval(()=>{
ctx.clearRect(0,0,500,400);
x+=5*xDirection;
y+=5*yDirection;
ctx.strokeRect(x,y,100,80);
if(x>=400){
xDirection=-1;
}else if(x<=0){
xDirection=1;
}
if(y>=320){
yDirection=-1;
}else if(y<=0){
yDirection=1;
}
},50)
</script>
