HTML5 Canvas画布

最新推荐文章于 2024-04-01 01:23:56 发布

原创最新推荐文章于 2024-04-01 01:23:56 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5画布

html5、画布专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML5 Canvas的基本用法，包括如何设置画布尺寸、使用坐标系进行绘图，以及如何通过调用各种方法实现描边、填充等效果。文中还提供了具体的JavaScript代码示例来演示如何绘制直线和圆形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

7HTML5 Canvas画布

1、 Canvas:定义画布的大小是style的属性，而定义画布的像素是Canvas的属性

如果设置Style里面的width和height他仅表示canvas元素占文档流的位置，这时候画布的宽度和高度是默认值，分别是600、300.

注意：设置canvas的宽度的，直接操作canvas的width属性和height属性。如果要放大canvas画布，设置的CSS width和height属性值，比例保持一致，说白了就是等比缩放。

2、坐标系

坐标原点是左上角，和数学上不大一样

3、描边和填充

4、常用方法

4.1、getContext（）：获取渲染的上下文，说白了就是获取画笔。后面传递参数，固定写“2d”

4.2、moveTo（x，y）：移动画笔位置，后面带两个参数。

4.3、lineTo（x，y）画一条直线，参数是线的终点位置。

4.4、stroke()绘制线条

4.5、closepath():关闭路径，回到起始点

4.6、ctx.fill（）完成填充操作

4.7、fillStyle：这是属性，设置填充的样式，一般填充颜色就行

4.8、beginPath（）:方法开始一条路径或者重置当前路径。

4.9context.arc(x,y,r,start,end,direction)绘制一个弧。前面两个参数组成圆心的坐标，第三个参数r半径。第四个参数：start其实的弧度，第五个参数end，结束的弧度，最后一个参数direction，绘制方向，true：逆时针方向，false：顺时针方向，默认值是false。

4.10context。rect（x,y,w,h）绘制矩形，（x，y）是矩形的坐标，w：是宽，h高

window.onload = function () {
    var canvas = document.getElementById("canvas");
    canvas.width=500;//画布的宽
    canvas.height=500;//画布的高
    var context=canvas.getContext("2d");
    context.moveTo(100,200);//移动圆点
    context.lineTo(100,400);//目标位置
    context.lineWidth=10;//目标粗细
    context.strokeStyle="red";//画笔的样式
    context.stroke();//开始画
};

context.closePath(); ///回到原点，解决封口问题

圆形：

context.arc(250,250,200,0,2*Math.PI,false);
        //左边距，上边距，半径，起始角度，目标角度，时针（true）
        context.lineWidth=10;//目标粗细
        context.strokeStyle="red";//画笔的样式
/*       context.fillStyle="red";
        context.fill();*/
        context.stroke();//开始画