html5绘制火柴棒人物

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body οnlοad="draw('canvas')">
<canvas id="canvas" width="500" height="300" style="border:1px solid blue;"></canvas>
</body>
<script>
function draw(id){
var c=document.getElementById('canvas');
var cxt=c.getContext("2d");
cxt.beginPath();//开始绘图路径
cxt.arc(100,50,30,0,Math.PI*2,true);//绘制一个圆形
cxt.fillStyle="black";
cxt.fill();
//绘制嘴巴
cxt.beginPath();
cxt.strokeStyle="#c00";
cxt.lineWidth=3;
cxt.arc(100,50,20,0,Math.PI,false);
cxt.stroke();
//绘制眼睛
cxt.beginPath();
cxt.fillStyle="#c00";
cxt.arc(90,45,3,0,Math.PI*2,true);
cxt.fill();
cxt.moveTo(113,45);
cxt.arc(110,45,3,0,Math.PI*2);
cxt.fill();
//绘制身躯
cxt.moveTo(100,80);
cxt.lineTo(100,150);
cxt.moveTo(100,100);
cxt.lineTo(60,120);
cxt.moveTo(100,100);
cxt.lineTo(140,120);
cxt.moveTo(100,150);
cxt.lineTo(60,190);
cxt.moveTo(100,150);
cxt.lineTo(140,190);
cxt.stroke();

}
</script>

</html>

html5绘制火柴棒人物相关推荐

JavaApplet 绘制火柴棒和轮播图片
import java.applet.*; import java.awt.*;public class TriangleApplet extends Applet{Image img; //声明一个 ...
HTML5的绘图步骤——示例绘制火柴人
目录 HTML5的绘图步骤 1.创建画布 2.获取画布 3.获取画笔 4.绘制图形绘制火柴人 1.源代码 2.运行效果 HTML5的绘图步骤 1.创建画布 <canvas id="画 ...
Java 洛谷 P1149 火柴棒等式
题目链接:https://www.luogu.com.cn/problem/P1149 代码实例: import java.util.Scanner;public class Main {public ...
Java洛谷P1149 火柴棒等式
题目链接:https://www.luogu.com.cn/problem/P1149 代码实例: import java.util.Scanner;public class Main {public ...
html5时钟代码菜鸟课程,html5绘制时钟动画
这篇文章主要介绍了html5绘制时钟动画,需要的朋友可以参考下复制代码代码如下: var clock=document.getElementById("clock"); var ...
html5 绘制图形,HTML5绘制几何图形
绘制几何图形 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext(" ...
火柴棒等式（洛谷P1149题题解，Java语言描述）
题目要求 P1149题目链接分析看起来要搜索,但何必呢?不搜也行啊~ 其实我们预先把每一位的数值(0~9)算出来就好,分别是这样的: key = 0, value = 6 key = 1, val ...
火柴棒等式（洛谷-P1149）
题目描述给你n根火柴棍,你可以拼出多少个形如"A+B=C"的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0-9的拼法如图所示: 注 ...
html设计一个图片墙,html5 绘制类似墙型的背景
最近开发的项目中要使用html5绘制各种虚线包括贝塞尔虚线.圆形虚线.各种虚线段,还包括各种形式的背景墙,截图如下: 从这张图片中可以看出有很多种形式的虚线和背景墙,下面主要介绍一下墙型背景,如下如: ...

html5绘制火柴棒人物

html5绘制火柴棒人物相关推荐

最新文章

热门文章