HTML5 canvas画布

canvas是什么

H5里面的一个标签，作为一个标签，他就像是一幅画布，等待着你来作画。可以说，他只是一个容器而已，需要配合着JavaScript来进行绘制。

创建canvas元素

创建了一个canvas元素，并规定了元素的id，宽度和高度。

<canvas id="can" width="500px" height="500px" ></canvas>

注意： 创建标签，画布的大小在标签上设置，如果在css设置，设置的是这个标签的大小，而不是画布的大小。

通过 JavaScript 来绘制

canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成：
画个矩形：

<script>
    //js使用id来寻找到刚刚创建的canvas元素
    var can = document.getElementById('can');
    //创建 context 对象,返回一个用于在画布上绘图的环境：
    var ctx = can.getContext('2d');
    //fillStyle 方法将其染成指定颜色
    ctx.fillStyle='#c84300';
    //fillRect 方法规定了形状、位置和尺寸
    ctx.fillRect(10,10,100,100)
</script>

理解坐标

上面的fillRect方法拥有参数(10,10,100,100)；
意思是：在画布上从左上角开始 (10,10)，绘制一个 100x100 的矩形。

getContext()

getContext() 方法返回一个用于在画布上绘图的环境。
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
画个三角形

<body>
    <!-- 加了个边框，方便我们知道画布的区域在哪里 -->
    <canvas id="can" width="300px" height="300px" style="border: 1px solid"></canvas>
</body>
<script>
    var can = document.getElementById('can');
    var cxt = can.getContext('2d');
    cxt.moveTo(10,10);//把路径移动到画布中的指定点，不创建线条
    cxt.lineTo(150,50);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
    cxt.lineTo(10,50);
    cxt.stroke();//绘制已定义的路径
</script>

得到一下图形
在这里插入图片描述
然后闭合图形

<script>
    var can = document.getElementById('can');
    var cxt = can.getContext('2d');
    cxt.moveTo(10,10);//把路径移动到画布中的指定点，不创建线条
    cxt.lineTo(150,50);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
    cxt.lineTo(10,50);
    //闭合图形，有两条线以上的，能自动帮你连接到 起始点。
    cxt.closePath();
    cxt.stroke();
</script>

画个圆形

<script>
    var can = document.getElementById('can');
    var cxt = can.getContext('2d');
    cxt.fillStyle = '#FF0000';
    cxt.beginPath();//起始一条路径，或重置当前路径
    cxt.arc(70,18,15,0,Math.PI*2,true);//创建弧/曲线（用于创建圆形或部分圆）
    cxt.closePath();//创建从当前点回到起始点的路径
    cxt.fill();//填充当前绘图（路径）
</script>

在这里插入图片描述
arc() 方法创建弧/曲线（用于创建圆或部分圆）
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
JavaScript 语法：
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
渐变

<script>
    var can = document.getElementById('can');
    var cxt = can.getContext('2d');
    var grd = cxt.createLinearGradient(0,0,175,50);//创建线性渐变（用在画布内容上）
    grd.addColorStop(0,"#FF0000");//规定渐变对象中的颜色和停止位置
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle = grd;//填充色等于刚刚设置的渐变色
    cxt.fillRect(10,10,175,50);
</script>

context.createLinearGradient(x0,y0,x1,y1);
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
插入图片

<script>
    var can = document.getElementById('can');
    var cxt = can.getContext('2d');
    var img = new Image();//建立图像对象
    console.log(img)
    img.onload = function() {
        cxt.drawImage(img,10,10) //向画布上绘制图像、画布或视频
    }
    img.src = 'zuanshi.png';    
</script>

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）
基础的就到这里了，以后再慢慢写。

十年树人

发布了15 篇原创文章 · 获赞 15 · 访问量 1385

私信关注

H5 canvas 基础一