【canvas】-- H5新增标签canvas的简单用法

♡ ‧₊˚  基本用法 ‧₊˚ ♡

1. 获取canvas对象--获取画布
2. 取得上下文(context)--获取画笔
3. 定义填充样式 / 定义轮廓样式
4. 绘制填充图形 / 绘制填充图形

以下案例都是先在body里新建了一个宽高都为600px的canvas画布，再将案例里的代码放在script里执行：

    <canvas width="600px" height="600px"></canvas>

案例一：绘制一个矩形

            // 填充矩形
            window.onload=function(){
            // 1.获取画布
            var canvas = document.querySelector('canvas');
            // 2.获取画笔 上下文对象
            var content = canvas.getContext('2d');
            // 3.给图形设置填充样式
            content.fillStyle='pink'; // 实心填充
            // 4.绘制图形 绘制矩形
            // fillReact 参数: x轴起始位置, y轴起始位置, 宽, 高 
            content.fillRect(0,0,200,200)
        }
    

            // 轮廓矩形            
             window.onload=function(){
            // 1.获取画布
            var canvas = document.querySelector('canvas');
            // 2.获取画笔 上下文对象
            var content = canvas.getContext('2d');
            // 绘制轮廓矩形
            // 3.给图形设置填充样式
            content.strokeStyle='lightblue';
            // 给轮廓图形设置线宽
            content.lineWidth=10;
            //绘制轮廓矩形 参数: x轴起始位置, y轴起始位置, 宽, 高 
            content.strokeRect(100,100,200,200);
        }

 

 案例二：绘制一个圆形

注意：Math.PI 就代表180°，如果我们需要360°，则直接用Math.PI*2，如果我们需要60°，则直接用Math.PI/3

        window.onload=function(){
            // 1.获取画布
            var canvas=docu