canvas用于在网页上的图形绘制
什么是canvas
canvas元素使用JavaScript在网页上绘制图像,专用于2D绘图
创建canvas元素
<canvas width="500" height="300">
您的浏览器不支持canvas!
</canvas>
尽量不要使用css给canvas添加 width height 会使整个画布拉伸
canvas的用途
(这里只是做简单介绍,绘制的图像以及属性)
.在JavaScript里面进行绘制,JavaScript中每次使用canvas,都要设置一个绘图环境,得到一个对象进行操作
// 获取canvas 拿到画布
var canvas = document.getElementsByTagName('canvas')[0];
// 获取画布的上下文 通过上下文拿到画笔
var ctx = canvas.getContext('2d');
ctx.strokeRect(x,y,width,height) 绘制描边矩形
x :距离原点横轴的距离 (原点是画布的左上角位置)
y :距离原点纵轴的距离
width :矩形的宽
height :矩形的高
//设置颜色
ctx.strokeStyle = "#00f";
//矩形线条宽度
cxt.strokeWidth = 1;
ctx.strokeRect(5,5,100,100)
!!!canvas绘制图像设置样式要在图像前面,否则没有效果
fillRect(x,y,width,height)绘制填充矩形
用法和参数 同strokeRect()基本一样
//设置颜色
ctx.fillStyle = "#00f";
ctx.strokeRect(5,5,100,100)
fillText(text, x, y); strokeText(text, x, y)
text 文本
x 文字距离原点横轴的距离
y 文本距离原点纵轴的距离
绘制文本有个有趣的东西,绘制英文的时候会根据国外四线三格的写法来绘制
画的不太好,不齐Hhhh,别在意这些