canvas
2020-03-26 本文已影响0人
即将牛逼的蛋蛋
学习canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="drawing" width="400" height="400"></canvas>
</body>
<script>
// 获取绘图上下文
var drawing = document.getElementById('drawing');
// 填充和描边
var context = drawing.getContext('2d')
// 描边
// context.strokeStyle = 'red';
// 填充
// context.fillStyle='#0000ff';
///////////// 绘制矩形
// fillRect() strokeRect() clearRect() 与矩形有关的方法
/* * 四个参数
* 矩形的 x 坐标
* 矩形的 y 坐标
* 矩形的宽度
* 矩形的高度
*/
////// fillRect() 在画布上绘制的矩形会填充 fillStyle 指定的颜色
// 绘制红色矩形
// context.fillStyle='#ff0000';
// context.fillRect(10,10,50,50);
// 绘制半透明的蓝色矩形
// context.fillStyle = 'rgba(0,0,255,0.5)'
// context.fillRect(30,30,50,50)
/////// stokeRect() 在画布上绘制的矩形会使用 strokeStyle 指定的颜色
// 绘制红色描边矩形
// context.strokeStyle='#ff0000';
// context.strokeRect(10, 10, 50, 50);
// 绘制半透明边框的蓝色矩形
// context.strokeStyle = 'rgba(0,0,255,0.5)'
// context.strokeRect(30,30,50,50)
////// clearRect() 用于清除画布上的矩形区域
// 绘制红色矩形
// context.fillStyle='#ff0000';
// context.fillRect(10,10,50,50);
// 绘制半透明的蓝色矩形
// context.fillStyle = 'rgba(0,0,255,0.5)'
// context.fillRect(30,30,50,50)
// 重叠的地方清除一个小矩形
// context.clearRect(40, 40, 10, 10);
////// 绘制路径
/*
* arc(x, y, 半径, 开始角度, 结束角度, true逆时针 false顺时针) (x, y)为圆心
* arcTo(x1, y1, x2 ,y2, 角度) 从上一点开始绘制一条弧线，到( x2, y2)为止，并且以给定的半径穿过( x1, y1)
* bezierCurveto(c1x, c1y, c2x, c2y, x, y) 从上一点开始绘制一条曲线，到( x, y)为止，并且以(c1x, c1y)和( c2x, c2y)为控制点
* lineTo(x, y) 从上一点开始绘制一条直线，到(x, y)为止
* moveTo(x, y) 将绘图点移到(x, y)
* quadraticCurveto(cx, cy, x, y) 从上一点开始绘制一条如此曲线，到(x, y)为止，并且以( cx, cy)为控制点
* rect(x, y, width, height) 从点(x, y)开始绘制一个矩形路径，宽度和高度分别由width和height指定
*/
// 绘制外圆
// context.arc(100, 100, 99, 0, Math.PI * 2, false);
// 绘制内圆
// context.arc(100, 100, 94, 0, Math.PI * 2, false);
// 绘制分针 绘图点移到圆心的位置
// context.moveTo(100, 100);
// context.lineTo(100, 30);
// 绘制时针 绘图点移到圆心的位置
// context.moveTo(100, 100);
// context.lineTo(45, 100);
// 绘制路径 必须调用stroke 才可以画出
// context.stroke();
/////////// 绘制文本
/*
* font 文本样式 大小
* textAlign 文本对齐方式 start end left right center
* textBaseLine 文本的基线 top hanging middle alphabetic bottom
*/
// context.font='bold 14px sans-serif';
// context.textAlign='center';
// context.textBaseline='middle';
// 在（100，20）的位置绘制文本
// context.fillText('12', 100 , 20);
// context.textAlign='start';
// context.fillText('12', 100 , 40);
// context.textAlign='end';
// context.fillText('12', 100 , 60);
//////////////// 变换
/*
* rotate(角度) 围绕远点旋转图像
* scale(scaleX, scaleY) x和y分别以多少倍进行缩放
* translate(x, y) 将坐标原点移动到(x, y)
*/
// 上面画圆的方法并未更改原点 更改原点之后绘制更加方便
context.translate(200, 200);
</script>
</html>
