canvas画布

程序员文章站 2022-04-25 19:53:33

...

canvas是定义状态实现画图的

canvas中无px单位；
画直线：
context.moveTo(100,200);
context.lineTo(300,200);
context.stroke();//画线

改变高和颜色：
定义宽：context.lineWidth=5；
context.stroke();//画线
画线的颜色：context.strokeStyle='#ccc'；
context.fill();//填充颜色
填充颜色：contex.fillStyle='#ccc'；

context.beginPath() ：列表清空重置，然后我们就可以重新绘制新的图形。
context.closePath()：就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
context.translate(150,150),将图像移动至指定位置；
context.rotate(degrees*Math.PI/180);旋转角度；degrees是角度，Math.PI/180是弧度，js中只支持弧度，
context.save(); context.restore();

save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
canvas 中插入图片：
var oImg=new Images();//构造一个图片对象
context.drawImage(oImg, 0, 0, width, height); 插入到canvas中，
oImg.src=url;图片地址

        <canvas id="canvas" width="500" height="300"></canvas>
        <script>
            var canvas=document.getElementById('canvas');
            var ctx=canvas.getContext('2d');
            var img=new Image();
            img.src="xx.png";
//          canvas.style.position = 'absolute';//绝对定位，
//          canvas.style.backgroundColor='#c2c';//设置canvas的背景颜色
//          canvas.style.background='url(xx.png) no-repeat';//设置canvas的背景图片
             img.onload = function(){//需要等图片加载完后再画图，
                ctx.drawImage(img,300,0,100,80);
            }
        </script>

绘制矩形

//绘制矩形边框
             ctx.beginPath();
             ctx.rect(0,0,100,100);//绘制矩形
             ctx.strokeStyle="#00438A";
             ctx.stroke();
             //填充颜色，绘制矩形
             ctx.beginPath();
             ctx.fillStyle="#008000";
             ctx.fillRect(100,100,200,200);//绘制矩形

清除画布

ctx.clearRect(x, y, width, height);

x
矩形起点的 x 轴坐标。
y
矩形起点的 y 轴坐标。
width
矩形的宽度。
height
矩形的高度。

画直线，在画布*画线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    canvas{
        border: 1px solid #c2c;
    }
    </style>
</head>
<body>
    <canvas width='500' height="400">//宽高只能在标签上设置
        
    </canvas>

    <script>
        var canvas=document.querySelector('canvas');
        var context=canvas.getContext('2d');//只有2d

        // var triAngle=[{x:100,y:100},{x:300,y:100},{x:300,y:300},{x:100,y:300},{x:100,y:100}]
        // context.moveTo(triAngle[0].x,triAngle[0].y)；//移动画笔到起点
        // context.lineTo(triAngle[1].x,triAngle[1].y);//移动画笔到下一个点的位置
        // context.lineTo(triAngle[2].x,triAngle[2].y);
        // context.lineTo(triAngle[3].x,triAngle[3].y);
        // context.lineTo(triAngle[4].x,triAngle[4].y);
        // context.stroke();//划线

        canvas.addEventListener('mousedown',function(ev){
            context.moveTo(ev.clientX,ev.clientY);
            function onMousemove(ev){
                context.lineTo(ev.clientX,ev.clientY);
                context.stroke();
                }
            canvas.addEventListener('mousemove',onMousemove)
            document.addEventListener('mouseup',function(){
                canvas.removeEventListener('mousemove',onMousemove);//移出move事件
            })
        })
    </script>
</body>
</html>

七巧板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    canvas{
        border: 1px solid #c2c;
    }
    </style>
    
</head>
<body>
    <canvas width="800" height="800">
        
    </canvas>
    <script>
        //600*600
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');//不支持3d   
        var points=[
            [[0,0],[600,0],[300,300],'#00e4a5'],
            [[600,0],[600,600],[300,300],'#69bce8'],
            [[600,600],[300,600],[450,450],'#0140e5'],
            [[450,450],[300,600],[150,450],[300,300],'#0140e5'],
            [[600,600],[300,600],[450,450],'#e500cd'],
            [[300,600],[0,600],[0,300],'#0d9f0e'],
            [[300,300],[150,450],[150,150],'#cfc'],
            [[0,0],[0,300],[150,450],[150,150],'#e9e500']
        ];
        function draw(point){
            var firstPoint=point.shift();//删除并获取数组的第一个值；起点位置
            var color=point.pop();//删除并获取数组的最后值，颜色
            // console.log(firstPoint);
            context.beginPath();//清除之前状态
            context.moveTo(firstPoint[0],firstPoint[1] );//开始位置
            for( var i=0;i<point.length;i++){   
                context.lineTo(point[i][0],point[i][1]);    //其他状态点
            }
                context.closePath() //闭合线路
                context.fillStyle=color;//填充颜色
                context.fill();//画图
                
        }
        for( var i=0;i<points.length;i++){
            draw(points[i]) //循环图像
        }

    </script>
</body>
</html>

画圆

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

x
圆弧中心（圆心）的 x 轴坐标。
y
圆弧中心（圆心）的 y 轴坐标。
radius
圆弧的半径。
startAngle
圆弧的起始点， x轴方向开始计算，单位以弧度表示。
endAngle
圆弧的终点，单位以弧度表示。

anticlockwise 方向默认为顺时针

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    canvas{
        border: 1px solid #c2c;
    }
    </style>
</head>
<body>
    <canvas width='800' height="800"></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');//不支持3d
        context.arc(300,300,200,0,2*Math.PI);//画圆，原点位置，半径，圆弧起始位置，终止位置
        context.fillStyle='orange'
        context.fill();

        canvas.addEventListener('mousedown',function(ev){//*画图
            context.moveTo(ev.clientX,ev.clientY);
            function onMousemove(ev){
                context.lineTo(ev.clientX,ev.clientY);
                context.strokeStyle="orange";
                context.stroke();
            }
            canvas.addEventListener('mousemove',onMousemove)
            document.addEventListener('mouseup',function(ev){
                canvas.removeEventListener('mousemove',onMousemove)
            })
            
        })
    </script>
</body>
</html>

*落体运动/加速运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    canvas{
        border: 1px solid #ccc;
    }
    </style>
</head>
<body>
    <canvas width="800" height="400">
        你的浏览器不支持canvas
    </canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var context=canvas.getContext('2d');
        // context.arc(100,100,20,0,2*Math.PI);
        
        var y=200;
        var x=100;
        var vx=10;
        var vy=-20;
        var g=2;//加速度；

        function update(){
            vy+=g;//使vy 每次增加，从而实现加速；
            y+=vy;
            x+=vx;//匀速
        }

        function render(){
            context.clearRect(0,0,canvas.width,canvas.height);//清除画布，
            context.beginPath();//清除前面状态，
            context.arc(x,y,10,0,2*Math.PI);
            context.fillStyle='#c2c';
            context.fill();
        }
        
        setInterval(function(){
            update()
            render();

        },100)
    </script>
</body>
</html>

上一篇：基于Php实现自动获取关键词的分析_PHP

下一篇：读取RSS文件

canvas画布

canvas是定义状态实现画图的

绘制矩形

清除画布

画直线，在画布*画线

七巧板

画圆

*落体运动/加速运动

canvas制作的烟花效果

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题

用canvas实现图片滤镜效果附演示

html5 canvas实现圆形时钟代码分享

HTML5 Canvas draw方法制作动画效果示例

HTML5 canvas画图并保存成图片的jcanvas插件

html5通过canvas实现刮刮卡效果示例分享

HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)

用html5的canvas画布绘制贝塞尔曲线完整代码

Canvas与Image互相转换示例代码