canvas制图QQ企鹅
2017-12-20 本文已影响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>
效果图
学艺不精,眼睛有条线 ,还有就是头部和脖子上有条线.,明天再处理吧.
