HTML5元素用于图形的绘制,区别于css,它的绘制通过javascript来完成绘制的
标签只是图形容器,必须使用及保本来绘制图形
Canvas API主要聚焦与2D图形。同时元素的
WebGL API
则用于绘制硬件加速的2D和3D图形
<canvas id="canvas" width="200" height="200">canvas>
<script>
/* 获取画布 */
var canvas = document.getElementById("canvas");
/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
const ctx = canvas.getContext('2d');
/* 填充颜色 */
ctx.fillStyle = '#ff2d51';
/* 绘制矩形fillRect(x,y,width,height) x,y 分别是横轴 纵轴起点位置,width height 表示绘制的宽,高大小*/
ctx.fillRect(10,10,100,100);
script>
canvas是一个二维网络
canvas的左上角坐标为(0,0)
绘制矩形fillRect(x,y,width,height) x,y 分别是横轴 纵轴起点位置,width height 表示绘制的宽,高大小
所谓的路径:就是连续的坐标点的集合
在canvas上画线,可以使用一下两种方法
绘制线条必须使用到stroke()方法,执行绘制
<canvas id="canvas" width="200" height="200">canvas>
<script>
/* 获取画布 */
var canvas = document.getElementById("canvas");
/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
const ctx = canvas.getContext('2d');
/* 绘制路径 */
ctx.moveTo(0,0)
ctx.lineTo(100,100)
/* 填充颜色 */
ctx.strokeStyle = '#ff2d51';
ctx.stroke();
script>
<canvas id="canvas" width="200" height="200">canvas>
<script>
/* 获取画布 */
var canvas = document.getElementById("canvas");
/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
const ctx = canvas.getContext('2d');
/* 绘制路径 */
ctx.beginPath()
/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
ctx.arc(100,100,50,0,Math.PI*2)
ctx.closePath()
/* 填充颜色 */
ctx.fillStyle = '#ff2d51';
ctx.fill();
/* 边颜色 */
ctx.strokeStyle = '#333';
/* 边宽 */
ctx.lineWidth = 5;
ctx.stroke();
script>
<canvas id="canvas" width="400" height="400">canvas>
<script>
/* 获取画布 */
var canvas = document.getElementById("canvas");
/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
const ctx = canvas.getContext('2d');
/* 绘制路径 */
ctx.beginPath()
/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
ctx.arc(200,200,100,0,Math.PI*2)
ctx.closePath()
/* 填充颜色 */
ctx.fillStyle = '#ff2d51';
ctx.fill();
// 后绘制 覆盖先绘制的
ctx.beginPath()
/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
ctx.arc(200,200,50,0,Math.PI*2)
ctx.closePath()
/* 填充颜色 */
ctx.fillStyle = '#333';
ctx.fill();
ctx.stroke();
script>
<canvas id="canvas" width="400" height="400">canvas>
<script>
/* 获取画布 */
var canvas = document.getElementById("canvas");
/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
const ctx = canvas.getContext('2d');
var increateFlag = true;
var radius = 50
function draw(){
/* 清除指定矩形内的形状 */
ctx.clearRect(0,0,canvas.width,canvas.height)
/* 绘制路径 */
ctx.beginPath()
/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
ctx.arc(200,200,radius,0,Math.PI*2)
ctx.closePath()
/* 填充颜色 */
ctx.fillStyle = '#ff2d51';
ctx.fill();
ctx.stroke();
if(radius > 100){
increateFlag = false;
}else if(radius < 50){
increateFlag = true;
}
if(increateFlag){
radius++;
}else{
radius--;
}
}
// draw();
setInterval(draw,20);
script>
<canvas id="canvas" width="400" height="400">canvas>
<script>
/* 获取画布 */
var canvas = document.getElementById("canvas");
/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
const ctx = canvas.getContext('2d');
var increateFlag = true;
var radius = 50
function draw(){
/* 清除指定矩形内的形状 */
ctx.clearRect(0,0,canvas.width,canvas.height)
/* 绘制路径 */
ctx.beginPath()
/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
ctx.arc(200,200,radius,0,Math.PI*2)
ctx.closePath()
/* 填充颜色 */
ctx.fillStyle = '#ff2d51';
ctx.fill();
// 后绘制 覆盖先绘制的
/* 绘制路径 */
ctx.beginPath()
/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
ctx.arc(200,200,25,0,Math.PI*2)
ctx.closePath()
/* 填充颜色 */
ctx.fillStyle = 'blue';
ctx.fill();
ctx.stroke();
if(radius > 100){
increateFlag = false;
}else if(radius < 50){
increateFlag = true;
}
if(increateFlag){
radius++;
}else{
radius--;
}
}
// draw();
setInterval(draw,20);
script>