美文网首页
canvas制图QQ企鹅

canvas制图QQ企鹅

作者: 哼_ | 来源:发表于2017-12-20 18:09 被阅读17次

    这个曲线较多,用的比较多的是贝塞尔曲线.2d和3d的交换

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;margin: 0;
            box-sizing: border-box;
        }
        body{
            position: relative;
        }
#canvas{
    border:1px solid #ccc;
    display: block;
    margin: 20px auto;
    
}
</style> 
</head>
<body>
<canvas id="canvas" width="600" height="500"></canvas> 
</body>
<script>
    function drawGrid(CANVAS_WIDTH,CANVAS_HEIGHT,GRID_WIDTH,GRID_HEIGHT){
        var rows=parseInt(CANVAS_WIDTH/GRID_WIDTH);  
        var cols=parseInt(CANVAS_HEIGHT/GRID_HEIGHT);  
        for(var i=0;i<rows;++i)  {  
            for(var j=0;j<cols;++j)  
            {  
                drawRect(i,j,GRID_WIDTH,GRID_HEIGHT);  
                if(i==0||j==0)                  
                {  
                    drawText(i,j,GRID_WIDTH,GRID_HEIGHT); //增加坐标  
                }  
            }  
        }  
}
    drawGrid(600,500,50,50)
    // 绘制矩形  
    var myCanvas = document.getElementById("canvas");
     var ctx=myCanvas.getContext("2d");  
     console.log(ctx)
function drawRect(i,j,GRID_WIDTH,GRID_HEIGHT){ 
    var ctx=document.getElementById("canvas").getContext("2d");  
    ctx.lineWidth=0.5;  
    ctx.fillStyle="#ccc";  
    ctx.strokeRect(i*50,j*50,GRID_WIDTH,GRID_HEIGHT);  
}
//绘制横坐标与纵坐标  
function drawText(i,j,GRID_WIDTH,GRID_HEIGHT){  
    var ctx=document.getElementById("canvas").getContext("2d");  
    var x_axis=i*50+"";  
    var y_axis=j*50+"";

} 
ctx.beginPath();
ctx.fillStyle="#000"
ctx.moveTo(150/2,335/2);
ctx.bezierCurveTo(150/2,-110/2,850/2,-110/2,850/2,335/2);//头部三次贝塞尔曲线
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="#fff"
ctx.moveTo(415/2,165/2);
ctx.bezierCurveTo(355/2,165/2,355/2,328/2,415/2,330/2);//眼睛左眼左半边三次贝塞尔曲线
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="#fff"
ctx.moveTo(415/2,165/2);
ctx.bezierCurveTo(474/2,165/2,474/2,328/2,415/2,330/2);//眼睛左眼右半边三次贝塞尔曲线
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="#000"
ctx.moveTo(440/2,225/2);
ctx.bezierCurveTo(416/2,225/2,416/2,289/2,440/2,289/2);//眼睛左眼眼珠左边三次贝塞尔曲线
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="#000"
ctx.moveTo(440/2,225/2);
ctx.bezierCurveTo(461/2,225/2,461/2,289/2,440/2,289/2);//眼睛左眼眼珠右边三次贝塞尔曲线
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="#fff"
ctx.moveTo(621/2,165/2);
ctx.bezierCurveTo(551/2,165/2,551/2,328/2,621/2,328/2);//眼睛右眼
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="#fff"
ctx.moveTo(621/2,165/2);
ctx.bezierCurveTo(669/2,165/2,669/2,328/2,621/2,328/2);//眼睛右眼
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="#000"
ctx.arc(598/2,249/2,24/2,0,2*Math.PI)
ctx.fill();

//三角形
ctx.beginPath();
ctx.fillStyle = "#fff"
ctx.moveTo(599/2,258/2);
ctx.lineTo(590/2,274/2);
ctx.lineTo(610/2,274/2);
ctx.closePath();
ctx.fill()
//---------------------头部------- 眼睛结束---------------

//----------------------------------------------------- 肚子--------------------
ctx.beginPath();
ctx.fillStyle="#000"
ctx.moveTo(150/2,335/2);
ctx.bezierCurveTo(-20/2,1100/2,1020/2,1100/2,850/2,335/2);//眼睛左眼眼珠右边三次贝塞尔曲线
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="#fff"
ctx.moveTo(215/2,500/2);
ctx.bezierCurveTo(150/2,1000/2,850/2,1000/2,800/2,490/2);//眼睛左眼眼珠右边三次贝塞尔曲线
// context.quadraticCurveTo(513/2,604/2,800/2,513);
// ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="#000"
ctx.moveTo(215/2,500/2);
// ctx.bezierCurveTo(198,850,827,850,800,513);//眼睛左眼眼珠右边三次贝塞尔曲线
ctx.quadraticCurveTo(513/2,604/2,800/2,490/2);//二次贝塞尔曲线
ctx.closePath();
ctx.fill();

//---------------------------------脚--------------------------
ctx.beginPath();
ctx.fillStyle="#f2af2c"
ctx.moveTo(220/2,775/2);
ctx.bezierCurveTo(-100/2,990/2,486/2,1000/2,486/2,910/2);
ctx.globalCompositeOperation="destination-over";
ctx.closePath();
ctx.lineWidth="10"
ctx.stroke();
ctx.fill()


ctx.beginPath();
ctx.fillStyle="#f2af2c"
ctx.moveTo(540/2,900/2);
ctx.bezierCurveTo(500/2,1010/2,1150/2,985/2,775/2,775/2);
ctx.globalCompositeOperation="destination-over";
ctx.closePath();
ctx.lineWidth="10"
ctx.stroke();
ctx.fill()
//---------------------------------围巾-------------------------
ctx.beginPath();
ctx.fillStyle="#db3831"
ctx.moveTo(160/2,369/2);
ctx.lineTo(150/2,440/2);
ctx.bezierCurveTo(250/2,580/2,790/2,570/2,850/2,426/2);
ctx.lineTo(840/2,359/2);
ctx.bezierCurveTo(859/2,507/2,162/2,507/2,160/2,369/2);
ctx.globalCompositeOperation="source-over";
ctx.closePath();
ctx.fill()

ctx.beginPath();
ctx.fillStyle = "#db3831"
ctx.moveTo(278/2,520/2);  // 创建开始点
// ctx.lineTo(245/2,610/2);               // 创建水平线
// ctx.arcTo(230/2,632/2,230/2,670/2,50/2); // 创建弧
ctx.lineTo(245/2,636/2); 
// ctx.arcTo(380/2,650/2,398/2,659/2,50/2); // 创建弧
ctx.lineTo(373/2,670/2);         // 创建垂直线

ctx.lineTo(390/2,544/2);         // 创建垂直线
ctx.quadraticCurveTo(330/2,540/2,278/2,520/2);//二次贝塞尔曲线
ctx.stroke();
ctx.lineWidth="10";
ctx.stroke();
ctx.fill()
//--------------------------------嘴--------------------
ctx.beginPath();
ctx.fillStyle="#f2af2c"
ctx.moveTo(307/2,414/2);
ctx.bezierCurveTo(307/2,348/2,717/2,348/2,717/2,414/2);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="#f2af2c"
ctx.moveTo(307/2,414/2);
ctx.bezierCurveTo(307/2,476/2,717/2,476/2,717/2,414/2);
ctx.closePath();
ctx.fill();

//画一个弧

ctx.beginPath();
ctx.lineCap="round";
ctx.arc(508/2,59/2,400/2,Math.PI/1.58,Math.PI/2,true);
ctx.lineWidth="10";
ctx.stroke();

ctx.beginPath();
ctx.arc(508/2,59/2,400/2,Math.PI/2,Math.PI/2.2,true);
ctx.lineWidth="10";
ctx.stroke();

ctx.beginPath();
ctx.arc(508/2,59/2,400/2,Math.PI/2.2,Math.PI/2.8,true);
ctx.lineWidth="10";
ctx.lineCap="round";
// ctx.closePath()
ctx.stroke();
//-------------------------胳膊---------------------
ctx.beginPath();
ctx.moveTo(130/2,476/2);
ctx.fillStyle="#000"
ctx.bezierCurveTo(-120/2,770/2,0/2,900/2,160/2,667/2);
ctx.fill();

ctx.beginPath();
ctx.moveTo(870/2,476/2);
ctx.fillStyle="#000"
ctx.bezierCurveTo(1150/2,770/2,1010/2,900/2,840/2,667/2);
ctx.fill();
//---------------------------------围巾上的褶皱

ctx.beginPath();
ctx.moveTo(326/2,525/2);
ctx.fillStyle="#000"
ctx.quadraticCurveTo(300/2,604/2,307/2,617/2);
ctx.quadraticCurveTo(320/2,560/2,350/2,531/2);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.moveTo(145/2,420/2);
ctx.fillStyle="#000"
ctx.quadraticCurveTo(178/2,450/2,240/2,460/2);
ctx.quadraticCurveTo(190/2,450/2,155/2,405/2);
ctx.closePath();

ctx.fill();

ctx.beginPath();
ctx.moveTo(845/2,400/2);
ctx.fillStyle="#000"
ctx.quadraticCurveTo(820/2,430/2,770/2,454/2);
ctx.quadraticCurveTo(810/2,450/2,855/2,408/2);
ctx.closePath();
ctx.fill();

</script>
</html>
    效果图

    学艺不精,眼睛有条线 ,还有就是头部和脖子上有条线.,明天再处理吧.

    相关文章

      网友评论

          本文标题：canvas制图QQ企鹅

          本文链接：https://www.haomeiwen.com/subject/viqnwxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|canvas制图QQ企鹅|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！