canvas认识

2022-08-01 19:21:16

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>

码农公寓

相关文章