时间戳

首页 > 技术文章 > canvas认识

canvas认识

shenq 2016-09-24 23:48 原文

1使用canvas绘制一个矩形

<canvas id="canvas" width="640" height="360"></canvas>

　　

<script>
//    获取context对象
    var canvas = document.getElementById('canvas');
    if(canvas.getContext) {
        var context = canvas.getContext('2d');
//        设置颜色
        context.fillStyle = 'rgb(255,0,0)';
//        从坐标（20,30）开始，画一个64x36大小的矩形
        context.fillRect(20,30,64,36);
    }
</script>

　　

2划线

<script>
//    获取htmlcanvas标签
    var c=document.getElementById('myCanvas');
//    返回一个用来绘制环境类型的环境
    var ctx = c.getContext('2d');
//线宽
    ctx.lineWidth = 10;
//设置画笔颜色为红色
    ctx.strokeStyle = 'red';
//创建一个新的路径
    ctx.beginPath();
//画笔光标位置移动到10,10
    ctx.moveTo(10,10);
//从开始坐标移动到150,10处
    ctx.lineTo(150,50);
//开始绘制好定义的路线
    ctx.stroke();
</script>

　　

<canvas id="myCanvas" width="200" height="100">
    你的浏览器不支持HTML5
</canvas>

　　

3、画矩形

<script>
    //    获取htmlcanvas标签
    var c=document.getElementById('myCanvas');
    //    返回一个用来绘制环境类型的环境
    var ctx = c.getContext('2d');
    //线宽
    ctx.lineWidth = 10;
    //设置画笔颜色为红色
    ctx.strokeStyle = 'red';
    //创建一个新的路径
    ctx.beginPath();
    //绘制矩形的起点坐标、终点坐标、长、宽
    ctx.strokeRect(10,10,70,40);
    ctx.stroke();
</script>

　　

4实心矩形

<script>
    //    获取htmlcanvas标签
    var c=document.getElementById('myCanvas');
    //    返回一个用来绘制环境类型的环境
    var ctx = c.getContext('2d');
    //线宽
    ctx.lineWidth = 10;
    //设置画笔颜色为红色
    ctx.strokeStyle = 'red';
    //创建一个新的路径
    ctx.beginPath();
    //绘制矩形的起点坐标、终点坐标、长、宽
    ctx.fillRect(10,10,70,40);
    ctx.stroke();
</script>

　　

5画圆

<script>
    //    获取htmlcanvas标签
    var c=document.getElementById('myCanvas');
    //    返回一个用来绘制环境类型的环境
    var ctx = c.getContext('2d');
    //线宽
    ctx.lineWidth = 10;
    //设置画笔颜色为红色
    ctx.strokeStyle = 'red';
    //创建一个新的路径
    ctx.beginPath();
    //绘制矩形的起点坐标、终点坐标、长、宽
    ctx.arc(20,20,10,0,360*Math.PI/180,true);
    ctx.stroke();
</script>

　　

6矩形的半圆

<script>
    //    获取htmlcanvas标签
    var c=document.getElementById('myCanvas');
    //    返回一个用来绘制环境类型的环境
    var ctx = c.getContext('2d');
    //线宽
    ctx.lineWidth = 1;
    //设置画笔颜色为红色
    ctx.strokeStyle = 'red';
    //创建一个新的路径
    ctx.beginPath();
    //绘制矩形的起点坐标、终点坐标、长、宽
    ctx.moveTo(20,20);
    ctx.lineTo(70,20);
    ctx.arcTo(120,20,120,70,50);
    ctx.lineTo(120,120);
    ctx.stroke();
</script>

　　

7圆形矩形

<script>
    //    获取htmlcanvas标签
    var c=document.getElementById('myCanvas');
    //    返回一个用来绘制环境类型的环境
    var ctx = c.getContext('2d');
    //线宽
    ctx.lineWidth = 1;
    //设置画笔颜色为红色
    ctx.strokeStyle = 'red';
    //创建一个新的路径
    ctx.beginPath();
    //绘制矩形的起点坐标、终点坐标、长、宽
    ctx.moveTo(40,20);
    ctx.lineTo(100,20);
    ctx.arcTo(120,20,120,40,20);
    ctx.lineTo(120,70);
    ctx.arcTo(120,90,100,90,20);
    ctx.lineTo(40,90);
    ctx.arcTo(20,90,20,70,20);
    ctx.lineTo(20,40);
    ctx.arcTo(20,20,40,20,20);
    ctx.stroke();

</script>

　　

8、擦除canvas画板

<script>
    //    获取htmlcanvas标签
    var c=document.getElementById('myCanvas');
    //    返回一个用来绘制环境类型的环境
    var ctx = c.getContext('2d');
    //线宽
    ctx.lineWidth = 1;
    //设置画笔颜色为红色
    ctx.strokeStyle = 'red';
    //创建一个新的路径
    ctx.beginPath();
    //绘制矩形的起点坐标、终点坐标、长、宽
    ctx.fillRect(20,20,40,80);
    ctx.clearRect(30,30,20,30);
    ctx.stroke();
</script>

　　

9.绘制复杂图形

<script>
    //    获取htmlcanvas标签
    var c=document.getElementById('myCanvas');
    //    返回一个用来绘制环境类型的环境
    var ctx = c.getContext('2d');
    //线宽
    ctx.lineWidth = 1;
    //设置画笔颜色为红色
    ctx.strokeStyle = 'red';
    //创建一个新的路径
    ctx.beginPath();
    //绘制矩形的起点坐标、终点坐标、长、宽
    ctx.moveTo(60,50);
    ctx.quadraticCurveTo(40,20,120,20);
    ctx.stroke();
</script>

　　

10.clip()

<script>
    //    获取htmlcanvas标签
    var c=document.getElementById('myCanvas');
    //    返回一个用来绘制环境类型的环境
    var ctx = c.getContext('2d');
    //线宽
    ctx.lineWidth = 1;
    //设置画笔颜色为红色
    ctx.strokeStyle = 'red';
    //创建一个新的路径
    ctx.beginPath();

    //绘制矩形的起点坐标、终点坐标、长、宽
    ctx.arc(60,50,20,0,2*Math.PI,true);
    ctx.clip();
    ctx.beginPath();
    ctx.fillStyle = 'lightblue';
    ctx.fillRect(60,50,10,10);
    ctx.stroke();
</script>

　　

11文字

<script>
    //    获取htmlcanvas标签
    var c=document.getElementById('myCanvas');
    //    返回一个用来绘制环境类型的环境
    var ctx = c.getContext('2d');
    //线宽
    ctx.lineWidth = 1;
    //设置画笔颜色为红色
    ctx.strokeStyle = 'red';
    //创建一个新的路径
    ctx.beginPath();
    //绘制矩形的起点坐标、终点坐标、长、宽
    ctx.moveTo(40,20);
//    ctx.fillText('林耀辉',130,130);
    ctx.textBaseline = 'ideographic';
    ctx.font = 'bold italic 30px Arial';
    ctx.moveTo(0,110);
    ctx.lineTo(250,110);
    ctx.strokeText('林耀辉',130,130);
    ctx.stroke();

</script>

　　

12、图片

 

13、放大缩小

<script>
    window.onload = function () {

        //    获取htmlcanvas标签
        var c=document.getElementById('myCanvas');
        //    返回一个用来绘制环境类型的环境
        var ctx = c.getContext('2d');
        //
        ctx.beginPath();
        ctx.strokeStyle = '#000000';
        ctx.strokeRect(20,20,100,100);

//        放大三倍
//        ctx.scale(3,3);
//        ctx.beginPath();
//        ctx.strokeStyle = '#cccccc';
//        ctx.strokeRect(20,20,100,100);

//        缩小0.5倍
//        ctx.scale(0.5,0.5);
//        ctx.beginPath();
//        ctx.strokeStyle = '#000000';
//        ctx.strokeRect(20,20,100,100);

        ctx.scale(-1,-1);
        ctx.beginPath();
        ctx.strokeStyle = '#000000';
        ctx.strokeRect(20,20,100,100);
    };

</script>

　　

 

推荐阅读