canvas基本用法

最新推荐文章于 2025-06-05 20:05:14 发布

原创最新推荐文章于 2025-06-05 20:05:14 发布 · 487 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas基础

canvas 同时被 2 个专栏收录

3 篇文章

订阅专栏

ICY___的canvas入门

3 篇文章

订阅专栏

这篇博客探讨了canvas如何通过JavaScript API实现基本的绘图操作，包括划线、画布操作、绘制矩形以及绘制圆形，为创建动态图形和游戏提供了基础。

canvas是一个强大的绘图及制作动画和游戏手段，下面介绍canvas利用js的API实现基本画图功能。

划线：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<canvas id="can"></canvas>
<script>
    //获取canvas元素
    var can=document.getElementById("can");
    //动态的设置宽和高
    //获取屏幕的可视区域宽高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    //操作canvas
    //转化为2d模式
    var content=can.getContext("2d");
    //使用js提供的API去绘制

    /*1.绘制线条*/
        /*设置线宽*/
    content.lineWidth=10;
        /*设置颜色*/
    content.strokeStyle="red";
        //画线的坐标
    content.moveTo(0,0);//起始坐标
    content.lineTo(400,400);//终止坐标
    content.stroke();//执行划线
    content.beginPath();//清空子路径，创建开始路径
    content.lineWidth=1;//线宽
    content.fillStyle="pink";//填充颜色
    content.strokeStyle="blue";//线的颜色
    content.moveTo(400,400);//起始位置
    content.lineTo(0,400);//终止位置
    content.lineTo(0,600);//终止位置（这样才会用到填充）
    content.stroke();//执行划线
    content.fill();//执行填充
    content.closePath();//闭合
</script>
</body>
</html>

画板：

 var can=document.getElementById("can");
    //动态的设置宽和高
    //获取屏幕的可视区域宽高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    //操作canvas
    //转化为2d模式
    var content=can.getContext("2d");
    //使用js提供的API去绘制

    /*1.绘制线条*/
        /*设置线宽*/
    content.lineWidth=10;
        /*设置颜色*/
    content.strokeStyle="red";
    content.lineWidth=1;//线宽
    content.strokeStyle="blue";//线的颜色

    document.body.onmousedown=function (e){
        var x= e.pageX;//鼠标下落事件，为起点
        var y= e.pageY;
        content.moveTo(x,y);
        this.onmousemove=function (event){
            var x1= event.pageX;//鼠标移动事件，为中点
            var y1= event.pageY;
            content.lineTo(x1,y1);
            content.stroke();
        }
    }
    document.body.onmouseup=function (){
        this.onmousemove=null;//鼠标抬起时，不执行划线
    }

绘制矩形：

    //获取canvas元素
    var can=document.getElementById("can");
    //动态的设置宽和高
    //获取屏幕的可视区域宽高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    //操作canvas
    //转化为2d模式
    var content=can.getContext("2d");

    //绘制矩形
    content.fillStyle="red";
    content.lineWidth=3;
    content.strokeStyle="blue";
    content.strokeRect(200,200,400,200);//绘制矩形框
    content.fillRect(200,200,400,200);//填充矩形

    //清除
    content.clearRect(300,300,10,10);//相当于矩形状的橡皮擦

绘制圆：（主要代码）

 //绘制圆
    content.beginPath();
    content.strokeStyle="green";
    content.fillStyle="green";
    content.arc(700,350,200,0,Math.PI,true);//参数为 圆心坐标（x，y）、半径、起始角度、终止角度、是否逆时针
    content.fill();
    content.closePath();
    content.beginPath();
    content.fillStyle="red";
    content.arc(700,400,150,0,Math.PI*2,true);
    content.fill();
    content.closePath();