HTML5 Canvas实战
2.10 创建自定义图形:绘制扑克牌花色
阅读(

路径和文本

图形及组合

绘制矩形

绘制圆形

使用自定义图形和填充样式

玩转贝塞尔曲线:绘制云朵

绘制透明图形

使用上下文栈来保存和恢复样式

使用组合操作

使用循环创建图案:绘制齿轮

随机图形属性:绘制开满鲜花的原野

创建自定义图形:绘制扑克牌花色

如果皇家同花顺会让你兴奋不已,本节就是为你而写。本节,我们将创建一个组函数,用来绘制一套扑克牌中的黑桃、红桃、梅花、方块。

绘制扑克牌花色
图2-11 绘制扑克牌花色

绘制步骤

按照以下步骤,绘制一套扑克牌中的黑桃、红桃、梅花、方块:

1. 定义drawSpade()函数,该函数通过绘制四条贝塞尔曲线、两条二次曲线、一条直线,来绘制黑桃:

function drawSpade(context, x, y, width, height){
  context.save();
  var bottomWidth  = width  *  0.7;
  var topHeight    = height  *  0.7; 
  var bottomHeight = height  *  0.3;
  context.beginPath();
  context.moveTo(x, y);
  //黑桃的左上部分
  context.bezierCurveTo(
    x, y  + topHeight  /  2,  // control point  1
    x  - width  /  2, y  + topHeight  /  2,  // control point  2
    x  - width  /  2, y  + topHeight  // end point
  );
  //黑桃的左下部分
  context.bezierCurveTo(
    x  - width  /  2, y  + topHeight  *  1.3,  // control point  1
    x, y  + topHeight  *  1.3,  // control point  2 
    x, y  + topHeight  // end point
  );
  //黑桃的右下部分
  context.bezierCurveTo(
    x, y  + topHeight  *  1.3,  // control point  1
    x  + width  /  2, y  + topHeight  *  1.3,  // control point  2
    x  + width  /  2, y  + topHeight  // end point
   );
  //黑桃的右上部分
  context.bezierCurveTo(
    x  + width  /  2, y  + topHeight  /  2,  // control point  1
    x, y  + topHeight  /  2,  // control point  2 
    x, y  // end point
  );
  context.closePath();
  context.fill();
  //黑桃的底部
  context.beginPath();
  context.moveTo(x, y  + topHeight); 
  context.quadraticCurveTo(
    x, y  + topHeight  + bottomHeight,  // control point
    x  - bottomWidth  /  2, y  + topHeight  + bottomHeight  // end point
  );
  context.lineTo(x  + bottomWidth  /  2, y  + topHeight  + bottomHeight);
  context.quadraticCurveTo(
    x, y  + topHeight  + bottomHeight,  // control point
    x, y  + topHeight  // end point
  );
  context.closePath();
  context.fillStyle  = "black"; 
  context.fill();
  context.restore();
}

2. 定义drawHeart ()函数,该函数通过绘制四条贝塞尔曲线,来绘制红桃:

​
function drawHeart(context, x, y, width, height){
  context.save();
  context.beginPath();
  var topCurveHeight  = height  *  0.3;
  context.moveTo(x, y  + topCurveHeight);
  //左上侧的曲线
  context.bezierCurveTo(
    x, y,
    x  - width  /  2, y,
    x  - width  /  2, y  + topCurveHeight
  );
  //左下侧的曲线
  context.bezierCurveTo(
    x  - width  /  2, y  +  (height  + topCurveHeight)  /  2, x, y  +  (height  + topCurveHeight)  /  2, 
    x, y  + height
  );
  //右下侧的曲线
  context.bezierCurveTo(
    x, y  +  (height  + topCurveHeight)  /  2,
    x  + width  /  2, y  +  (height  + topCurveHeight)  /  2, x  + width  /  2, y  + topCurveHeight
  );
  //右上侧的曲线
  context.bezierCurveTo(
    x  + width  /  2, y,
    x, y,
    x, y  + topCurveHeight
  );
  context.closePath();
  context.fillStyle  = "red";
  context.fill();
  context.restore();
}
​

3. 定义drawClub ()函数,该函数通过绘制四个圆、两条二次曲线、一条直线,来绘制梅花:

function drawClub(context, x, y, width, height){
  context.save();
  var circleRadius  = width  *  0.3; 
  var bottomWidth   = width  *  0.5; 
  var bottomHeight  = height  *  0.35; 
  context.fillStyle = "black";
  // 顶部的圆
  context.beginPath();
  context.arc(
    x, y  + circleRadius  +  (height  *  0.05),
    circleRadius,  0,  2  * Math.PI, false
  );
  context.fill();
  //右下侧的圆
  context.beginPath();
  context.arc(
    x  + circleRadius, y  +  (height  *  0.6),
    circleRadius,  0,  2  * Math.PI, false
  );
  context.fill();
  //左下侧的圆
  context.beginPath();
  context.arc(
    x  - circleRadius, y  +  (height  *  0.6),
    circleRadius,  0,  2  * Math.PI, false
  );
  context.fill();
  //中央的填充圆
  context.beginPath();
  context.arc(
    x, y  +  (height  *  0.5),
    circleRadius  /  2,  0,  2  * Math.PI, false
  );
  context.fill();
  //梅花的底部
  context.moveTo(x, y  +  (height  *  0.6)); 
  context.quadraticCurveTo(
    x, y  + height,
    x  - bottomWidth  /  2, y  + height
  );
  context.lineTo(x  + bottomWidth  /  2, y  + height);
  context.quadraticCurveTo(
    x, y  + height,
    x, y  + (height  *  0.6)
  );
  context.closePath();
  context.fill();
  context.restore();
}

4. 定义drawDiamond ()函数,该函数通过绘制四条直线,来绘制方块:

function drawDiamond(context, x, y, width, height){
  context.save();
  context.beginPath();
  context.moveTo(x, y);
  //左上侧的边
  context.lineTo(x  - width  /  2, y  + height  /  2);
  //左下侧的边
  context.lineTo(x, y  + height);
  //右下侧的边
   context.lineTo(x  + width  /  2, y  + height  /  2);
  //闭合路径,自动创建右上侧的边
  context.closePath();
  context.fillStyle  = "red"; context.fill();
  context.restore();
}

5. 页面加载完成后,定义画布上下文,再调用四个绘制函数来渲染一个黑桃、一个红桃、一个梅花、一个方块:

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas"); 
  var context = canvas.getContext("2d");
  drawSpade(context, canvas.width  *  0.2,  70,  75,  100);
  drawHeart(context, canvas.width  *  0.4,  70,  75,  100); 
  drawClub(context, canvas.width  *  0.6,  70,  75,  100);
  drawDiamond(context, canvas.width  *  0.8,  70,  75,  100); 
};

6. 在HTML文档的body部分嵌入canvas标签:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

本节演示如何通过组合HTML5画布提供的四类子路径(直线、圆弧、二次曲线、贝塞尔曲线),来绘制任意图形。

绘制黑桃,我们可以连接四条贝塞尔曲线形式其顶部,使用两条二次曲线和一条直线形成其底部。绘制红桃,跟绘制黑桃时几乎相同的方法连接四条贝塞尔曲线,不同点在底部而不是顶部。绘制梅花,可以通过三个圆来绘制顶部,跟黑桃相似,使用两条二次曲线和一条直线形成底部。最后,绘制方块,只需简单的连接四条直线即可。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验