canvas画布

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,711评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,079评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,194评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,089评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,197评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,306评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,338评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,119评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,541评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,846评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,014评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,694评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,322评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,026评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,257评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,863评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,895评论 2 351

推荐阅读更多精彩内容

  • 一、什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像 画布是...
    EndEvent阅读 689评论 0 1
  • canvas用途 游戏 小游戏 图表 报表 如 Charts插件 炫酷效果 banner 模拟器、图形编辑器 等...
    飞鱼_JS阅读 944评论 0 2
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 10,527评论 1 4
  • 1、canvas 是H5 新加入的标签 用来在页面中绘制图形 一般称之为画布。2、canvas的宽高要以属性的形...
    Simon_s阅读 498评论 0 0
  • 从未如此长的时间没提笔,也忘却了笔,更无从谈及字。似乎正在变成因忙碌的工作而去解释一切的曾经讨厌的角色!然而...
    8aa417e041d1阅读 810评论 32 26