Canvas学习笔记

最新推荐文章于 2024-02-25 10:02:48 发布

Kevin&Swift

最新推荐文章于 2024-02-25 10:02:48 发布

阅读量408

点赞数

本文链接：https://blog.csdn.net/qq_31214097/article/details/49157459

版权

多媒体老师上课讲了html5中的Canvas元素，自认为学的不是非常的精通，因此，特地去看了慕课网上的视频。所以写点笔记

canvas是html5中的一个标记，因此，可以像其他标记一样，创建标记，一下是在css中创建canvas的画布。

<html>

<head>
    <title>例1</title>

    <style>
        body {
            background: #dddddd;
        }
        
        #canvas {
            padding: 10px;
            border: thin inset #aaaaaa;
            margin: 10px;
            background-color: white;
        }
    </style>
</head>

以下是在body中定义canvas的id

<body>
    <canvas id='canvas' width='600' height='300'>
        Canvas not supported
    </canvas>

    <script src='example1.js'></script>
</body>

</html>

也可以在id的标记中规定大小

在JS代码中获取canvas 元素的上下文绘制环境

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

context是canvas中的画布环境，在js中主要是对这个进行操作

一下是一些基本路径的绘制，绘制线段

context.moveTo(100,100);//将鼠标移到此处;
context.lineTo(700,700);//将鼠标移到此处，开始绘制
context.lineWidth = 5;//线条的宽度
context.closePath();
//要注意以上都是canvas状态的绘制，因此，若改变多次颜色改变的话，则会影响全部
//不要影响的话，就可以开始一条的的路径的绘制
//结束了路径的绘制就可以用不同的状态进行绘制
context.fillStyle = "red";//若形成的是一个封闭的曲线，则会定义填充的宽度
context.strokeStyle = "red";//线条描边的状态
context.stroke();//绘制线条，
//再次开始绘制路径
context.beginPath();

圆弧的绘制

context.beginPath();
   //绘制弧线,需要5个参数,为坐标，半径，还有开始的圆角，结束的圆角Math.PI,是逆时针的排序的
   //还有若设为true的话，则就是逆时针开始画的
   context.arc(100,100,20,0,2*Math.PI,true);
   context.strokeStyle = "blue"
   context.stroke();
   //也可以使用填充进行绘制,用closePath来连接,若用fill的话则不管有没有closePath都会连接成一个封闭的图像