html5学习笔记6-- canvas

最新推荐文章于 2023-08-05 11:28:33 发布

会做饭的技术男

最新推荐文章于 2023-08-05 11:28:33 发布

阅读量90

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hj1jc0hck2jb.html

版权

前端专栏收录该内容

2508 篇文章 11 订阅

订阅专栏

绘制普通直线,先看效果图:

实现代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function drawGraph(id)
        {
            var canvas=document.getElementById(id);
            var context=canvas.getContext("2d");
            context.fillStyle="#CC00FF" //最外层canvas颜色
            context.fillRect(0,0,300,300)//最外层canvas区域
            context.beginPath()
            context.fillStyle="#008B8B"//填充颜色
            context.strokeStyle="#FFFF00"//线的颜色
            var dx=150
            var dy=150
            var s=100
            var dig=Math.PI/15*11
            for(var i=0;i<30;i++)
            {
                var x=Math.sin(i*dig)
                var y=Math.cos(i*dig)
                context.lineTo(dx+x*s,dy+y*s)
            }
            context.closePath()//关闭路径
            context.fill()//填充颜色
            context.stroke()
        }
    </script>
</head>
<body onload="drawGraph('canvasId')">
<canvas id="canvasId" width="300" height="400"></canvas>
</body>
</html>

绘制贝塞尔曲线

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function drawGraph(id)
        {
            var canvas=document.getElementById(id);
            var context=canvas.getContext("2d");
            context.fillStyle="#CC00FF"
            context.fillRect(0,0,300,300)
            context.beginPath()
            context.fillStyle="#008B8B"
            context.strokeStyle="#FFFF00"
            var dx=150
            var dy=150
            var s=100
            var dig=Math.PI/15*11
            context.moveTo(dx,dy)
            for(var i=0;i<60;i++)
            {
                var x=Math.sin(i*dig)
                var y=Math.cos(i*dig)
                context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s)//贝塞尔绘制函数
            }
            context.closePath()
            context.fill()
            context.stroke()
        }
    </script>
</head>
<body onload="drawGraph('canvasId')">
<canvas id="canvasId" width="300" height="400"></canvas>
</body>
</html>

关于了解的html5的基本知识点就到这里了，毕竟项目中没有去使用，出于个人闲来无事有个大体了解.并且都很基本，其实这些基本的知识点感觉没必要花费这么多精力去关注，这个时间个人感觉花的太多，完全可以找个小demo去研究，这样驱动的去学习效果会更好，先到这里了，准备投入到下一阶段其他开发知识点的学习中.

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5学习笔记6-- canvas

绘制普通直线,先看效果图:实现代码如下:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> function drawGraph(id) { var canvas=document.getElementById(id
复制链接

扫一扫