Canvas学习笔记之画圆(笑脸)

来源：互联网发布：常见协议端口号编辑：程序博客网时间：2024/05/08 23:19

Canvas学习笔记之画圆(笑脸)

步骤

1.使用getElementById()获取canvas元素。
2.获取canvas的绘制环境getContext()。
3.进行绘制画笔的粗细和颜色定义，分别是lineWidth和strokeStyle。
4.告诉系统开始绘制beginPath()，进行绘制坐标重置。
5.使用arc()和stroke()进行路径的绘制。如果不是画路径那就用fill()替代stroke()进行填充画实心的。

注意事项

1.绘制圆形的时候要注意使用的是弧度作为单位。
2.圆心的坐标是arc()定义的，而是根据定义的坐标为圆心的坐标绘制圆。

代码演示

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>画笑脸</title>    <!--兼容IE8和低版本IE-->    <!--[if lte IE 8]><script src="excanvas.js"></script><![endif]-->    <style>        #btn-smile {            display: block;        }    </style></head><body>    <button id="btn-smile">点我笑</button>    <canvas id="myCanvas" width="500" height="500">您的浏览器不支持canvas</canvas>    <script>    window.addEventListener('load', () => {        var btn = document.getElementById('btn-smile');        var c = document.getElementById('myCanvas');        var ctx = c.getContext('2d');        btn.addEventListener('click', () => {            //画笔初始化            ctx.lineWidth = 5;            ctx.strokeStyle = '#f00';            //位置初始化            ctx.beginPath();            //绘制圆形            //参数arc(圆心x坐标,y坐标,圆弧半径,起始角度，终止角度，是否逆时针)            //注意，这里的角度是以弧度为单位，所以计算的时候需要转换求出            //据定义，一周的弧度数为2πr/r=2π，360°角=2π弧度，因此，1弧度约为57.3°，即57°17'44.806''，1°为π/180弧度，近似值为0.01745弧度，周角为2π弧度，平角（即180°角）为π弧度，直角为π/2弧度。            //具体参考百度百科            for (var i = 0; i < 180; i++) {                (function(x) {                    setTimeout(function() {                        ctx.arc(65, 80, 20, Math.PI, Math.PI + x * Math.PI / 180, false);                        ctx.stroke();                        ctx.beginPath();                    }, 500);                    setTimeout(function() {                        ctx.arc(135, 80, 20, Math.PI, Math.PI + x * Math.PI / 180, false);                        ctx.stroke();                        ctx.beginPath();                    }, 600);                    setTimeout(function() {                        ctx.arc(100, 100, 70, 0, x * Math.PI / 180, false);                        ctx.stroke();                        ctx.beginPath();                    }, 800);                })(i);            }        }, false);    }, false);    </script></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>实心圆</title>    <!--兼容IE8和低版本IE-->    <!--[if lte IE 8]><script src="excanvas.js"></script><![endif]--></head><body>    <canvas id="myCanvas" width="500" height="500">您的浏览器不支持canvas</canvas>    <script>        //获取元素        var c = document.getElementById('myCanvas');        var ctx = c.getContext('2d');        //初始化画笔        ctx.lineWidth = 5;        //初始化位置        ctx.beginPath();        //进行实心圆绘制        ctx.arc(100, 100, 70, 0, 360 * Math.PI/180, true);        //圆填充        ctx.fillStyle = '#f00';        ctx.fill();    </script></body></html>

效果图

这里写图片描述

阅读全文

0 0