canvas画布

最新推荐文章于 2024-04-15 19:42:21 发布

Sk8？？？

最新推荐文章于 2024-04-15 19:42:21 发布

阅读量514

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/mrslonly/article/details/100987311

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

canvas画布

画图和图片实现技术：

图片
FLASH
SVG
canvas

canvas
canvas是：HTML提供的一个用于展示绘图效果的标签，愿以画布，在HTML页面中用于展示绘图效果。
canvas基本用法：

<canvas>您的浏览器不支持，请更换浏览器</canvas>

不要使用css样式设置宽高，应该使用HTML属性。如果使用css样式给canvas设置尺寸，会有拉伸效果
canvas默认宽高为：300和150。

基本的绘图步骤：

获得canvas画布对象
调用getContext（type）方法（type取值webgl代表获取三维绘图工具；取值如果是2d代表二维绘图工具）
基本绘图命令
设置绘图起点对象.moveTo(x,y)
设置直线到的位置对象.lineTo(x,y)
描边绘制对象.stroke()
填充绘制对象.fill()
闭合路径对象.closePath()

绘制各种图形：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="mycanvas" width="800" height="600">您的浏览器不支持，请更换浏览器</canvas>
<script>
    var mycanvas=document.getElementById('mycanvas');
    //获取上下文
    var ctx=mycanvas.getContext('2d');
    //矩形 参数1 x轴坐标  参数2 y轴坐标 参数3宽 参数4高
    ctx.rect(50,50,100,100);
    //边框颜色
    ctx.strokeStyle=grd;
    //边框
    ctx.stroke();
    //路径初始化 不初始化边框颜色可能继承
    ctx.beginPath();
    ctx.rect(200,50,100,100);
    //边框颜色
    ctx.strokeStyle='red';
    //边框
    ctx.stroke();

    ctx.beginPath();
    //设置路径开始点
    ctx.moveTo(350,50);
    //从之前的点画在这里
    ctx.lineTo(450,50);
    ctx.lineTo(450,150);
    ctx.lineTo(350,150);
    ctx.lineTo(350,50);
    //设置线条宽度
    ctx.lineWidth=4;
    ctx.stroke();

    //画三角形
    ctx.beginPath();
    ctx.moveTo(600,50);
    ctx.lineTo(670,150);
    ctx.lineTo(530,150);
    // ctx.lineTo(600,50);
    //直接画到原来的点路径没有闭合
    //闭合路径
    ctx.lineWidth=10;
    ctx.closePath();
    ctx.stroke();

    //画圆形
    ctx.beginPath();
    //圆形 弧 参数：中心点 x，中心点 y 半径 r 起始弧度 结束弧度
    ctx.arc(100,300,80,0,2*Math.PI);
    ctx.fillStyle='yellow';
    ctx.fill();

    //弧度
    ctx.beginPath();
    //圆形 弧 参数：中心点 x，中心点 y 半径 r 起始弧度 结束弧度 顺时针连（默认）false/逆时针true
    ctx.arc(300,300,80,2*Math.PI,Math.PI/2,true);
    ctx.fillStyle='yellow';
    ctx.fill();

    //创建颜色 参数x 参数y 线性渐变
    var grd=ctx.createLinearGradient(100,500,300,500);
    grd.addColorStop(0,"black");
    grd.addColorStop(0.3,"yellow");
    grd.addColorStop(0.6,"blue");
    grd.addColorStop(1,"green");

    //绘制文字
    //设置字体样式
    ctx.lineWidth=3
    //水平对齐
    ctx.textAlign='center';
    //垂直对齐
    ctx.textBaseline='middle';
    ctx.font='32px 微软雅黑';
    ctx.fillStyle=grd;
    ctx.strokeStyle=grd;
    ctx.fillText('大家好',100,500);
    //填充文字
    ctx.strokeText('匿名好',300,500);

    ctx.beginPath();

    ctx.fillRect(100-2,500-2,4,4);
	 //椭圆
	 content.ellipse(300,300,100,100,Math.PI*2,0,Math.PI,true);
    content.fill();
    //画弧线
    content.moveTo(20,20);//创建起始点
    content.lineTo(100,20);//创建水平线
    content.arcTo(150,20,150,70,50);//创建弧
    content.lineTo(150,130);//创建垂直线
    content.stroke();
</script>
</body>
</html>

多边形的绘制：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas width="600" height="400" id="mycanvas"></canvas>
<script>
    var mycanvas=document.getElementById('mycanvas');
    var ctx=mycanvas.getContext('2d');

    //设置画布中心点
    ctx.translate(mycanvas.width/2,mycanvas.height/2);
    //旋转画布
    //ctx.rotate(Math.PI/6);

    //正三角形
    ctx.beginPath();
    ctx.moveTo(0,-100);
    //旋转一圈2π 选择1/3;
    ctx.rotate(2*Math.PI/3);
    ctx.lineTo(0,-100);
    ctx.rotate(2*Math.PI/3);
    ctx.lineTo(0,-100);
    ctx.closePath();
    ctx.lineWidth=4;
    ctx.stroke();

    //正五边形
    function draw(n) {
        //保存绘画环境
        ctx.save();

        ctx.beginPath();
        ctx.moveTo(0, -100);
        for(var i=0;i<n;i++){
            ctx.rotate(2*Math.PI/n);
            ctx.lineTo(0,-100);
        }
        /*
    ctx.rotate(2*Math.PI/5);
    ctx.lineTo(0,-100);
    ctx.rotate(2*Math.PI/5);
    ctx.lineTo(0,-100);
    ctx.rotate(2*Math.PI/5);
    ctx.lineTo(0,-100);
    ctx.rotate(2*Math.PI/5);
    ctx.lineTo(0,-100);*/

        ctx.closePath();
        ctx.stroke();
        //还原绘画环境
        ctx.restore();
    }
    ctx.lineWidth=4;
    draw(5)
</script>
</body>
</html>

canvas动画：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
<canvas id="mycanvas" width="800" height="600">您的浏览器不支持，请更换浏览器</canvas>
<script>
    var mycanvas=document.getElementById('mycanvas');
    var ctx=mycanvas.getContext('2d');

    ctx.fillStyle='green';
    var x=55;
    setInterval(function(){
        //清楚画布
        ctx.clearRect(0,0,mycanvas.width,mycanvas.height);

        ctx.fillRect(x,50,50,50);
        x++;
    },1000/30);
    //1秒走30次 多少帧

    (function run(){
        ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
        ctx.fillRect(x,150,50,50);
        x+=2;
        //告诉浏览器要执行一个动画函数
        requestAnimationFrame(run)
    })();

    //比较定时器 和动画函数
</script>
</body>
</html>

Sk8？？？

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas画布

canvas画布画图和图片实现技术：图片FLASHSVGcanvascanvascanvas是：HTML提供的一个用于展示绘图效果的标签，愿以画布，在HTML页面中用于展示绘图效果。canvas基本用法：<canvas>您的浏览器不支持，请更换浏览器</canvas>不要使用css样式设置宽高，应该使用HTML属性。如果使用css样式给canva...
复制链接

扫一扫