canvas画布基础用法

最新推荐文章于 2024-04-15 19:42:21 发布
童心（成都）
最新推荐文章于 2024-04-15 19:42:21 发布
阅读量165
点赞数
分类专栏：前端代码
本文链接：https://blog.csdn.net/qq_40237472/article/details/112034525
版权
前端同时被 2 个专栏收录
24 篇文章 0 订阅
订阅专栏
代码
15 篇文章 0 订阅
订阅专栏
对应html代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Canvas</title>
        <style>
            body{
                text-align: center;
                padding-top: 20px;
            }
            canvas{
                box-shadow: 0 0 100px #333;
                margin: 0 auto;
            }
        </style>
    </head>
    <body onload="draw()">
        <canvas id="canvas" width="800" height="500">
            请更新浏览器
        </canvas>
        <script>
            function draw(){
                var canvas = document.getElementById('canvas')
                //判断浏览器是否支持
                if(canvas.getContext){
                    //获得画笔
                    var ctx = canvas.getContext('2d');
                    
                    /**
                     * 一.线描绘制（多边形）
                     * 1.创建起始路径
                     * 2.画出路径
                     * 3.闭合路径
                     * 4.描边或填充路径
                     */
                    ctx.fillStyle = 'rgb(200,0,0)';
                    //开始（起笔）
                    ctx.beginPath();
                    //起始点x,y
                    ctx.moveTo(25, 75);
                    //终点一：x，y
                    ctx.lineTo(80,125);
                    //终点二：x,y
                    ctx.lineTo(80,25);
                    //闭合（收笔）
                    ctx.closePath();
                    //填充
                    ctx.fill();                
                    //描边
                    //ctx.stroke();
                    
                    
                    /**二.矩形绘制
                     * 绘制填充矩形
                     * fillRect(x,y,width,height)
                     * 
                     * 绘制描边矩形
                     * strokeRect(x,y,width,height)
                     * 
                     * 清楚指定矩形区域
                     * clearRect(x,y,width,height)
                     */
                    //矩形填充
                    ctx.fillRect(125,25,100,100);
                    //清除填充描边
                    ctx.clearRect(145,45,60,60);
                    //矩形描边
                    ctx.strokeRect(150,50,50,50);
                    
                    
                    
                    /**
                     * 三、圆形绘制
                     * x,y圆心位置
                     * radius半径
                     * startangle开始角度
                     * endangle结束角度
                     * anticlockwise顺逆时针
                     * ctx.arc(x,y,radius,startangle,endangle,anticlockwise)
                     */
                    
                    //颜色
                    ctx.strokeStyle = 'orange';
                    //画笔宽度
                    ctx.lineWidth = 10
                    //开始
                    ctx.beginPath();
                    //画圆
                    ctx.arc(300,80,50,0,360,false);    
                    //结束
                    ctx.closePath();
                    //描边
//                    ctx.stroke();
                    //填充
                    ctx.fill();
                    
                
                    /**
                     * 四、线形渐变
                     * 参数1：起点x1,
                     * 参数2：起点y1,
                     * 参数3：终点x2,
                     * 参数4：终点y2,
                     * createLinearGradient(x1,y1,x2,y2)
                     */
                    //设置矩形渐变样式参数
                    var lingrad = ctx.createLinearGradient(0,0,0,150);
                    //addColorStop(0.0-1.0之间，渐变颜色);
                    lingrad.addColorStop(0,'#cc6677');
                    lingrad.addColorStop(0.9,'#ffffff');
                    //样式赋值画笔
                    ctx.fillStyle = lingrad;
                    //矩形填充
                    ctx.fillRect(400,25,100,200);
                    
                    
                    /**
                     * 五、径向渐变
                     * 圆心一：x1,y1
                     * 圆一半径：r1
                     * 圆心二：x2,y2
                     * 圆二半径：r2
                     * createRadialGradient(x1,y1,r1,x2,y2,r2)
                     */
                    //设置圆形渐变样式
                    var radgrad = ctx.createRadialGradient(600,70,10,600,70,30);
                    radgrad.addColorStop(0,'#A7D30C');
                    radgrad.addColorStop(0.9,'#019F62');
                    radgrad.addColorStop(1,'rgba(1,159,98,0.1)');
                    
                    //样式赋值画笔
                    ctx.fillStyle = radgrad;
                    //矩形填充
                    ctx.fillRect(550,25,100,100);
                    
                    
                    /**
                     * 六、画布渲染图片（不常用）
                     */
                    /*var img = new Image();
                    img.src = 'https://piyinc.oss-cn-qingdao.aliyuncs.com/bgmin/孤月.png';
                    img.onload = function(){
                        var pat = ctx.createPattern(img,'repeat');
                        ctx.fillStyle = pat;
                        ctx.fillRect(680,25,100,100);
                    }
                    */
                    
                    /*
                     * 七、画布渲染图片（常用）
                     * drawImage(图片,x轴,y轴,宽,高，绘制x轴，绘制y轴，绘制宽，绘制高);
                     */
                    var img = new Image();
                    img.src = 'https://piyinc.oss-cn-qingdao.aliyuncs.com/bgimg/冰山紫天.jpg';
                    img.onload = function(){
                        ctx.beginPath();
                        ctx.arc(100,200,50,0,Math.PI*2);
                        ctx.fill();
                        ctx.clip();                        
                        ctx.drawImage(this,50,150,100,100);
                        ctx.closePath();
                        
                    }
                    
                    
                    /**
                     * 八、文字阴影
                     * 参数1：font-weight
                     * 参数2：font-style
                     * 参数3：font-size
                     * 参数4：font-family
                     * ctx.font = "weight style size family";
                     */
                    //设置矩形渐变样式
                    var lingrad = ctx.createLinearGradient(225,230,100,350);
                    lingrad.addColorStop(0.1,'#cc6677');
                    lingrad.addColorStop(1,'#000');
                    ctx.fillStyle = lingrad;
                    //阴影颜色
                    ctx.shadowColor = 'Orange';
                    //阴影模糊度
                    ctx.shadowBlur = 3;
                    //阴影偏移量（结合矩形渐变）
                    ctx.shadowOffsetX = 20;
                    ctx.shadowOffsetY = 20;
                    //文字设置            
                    ctx.font = "bold italic 80px arial";
                    //绘制
                    ctx.fillText("毛俊刚",225,230);
                    
                }else{
                    alert("浏览器不支持，请更新浏览器");
                }
            }            
        </script>
    </body>
</html>
童心（成都）
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas画布基础用法

对应html代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Canvas</title> <style> body{ text-align: center; padding-top: 20px;...
复制链接

扫一扫