- 先看代码
<canvas id="test2" width="500" height="300"></canvas>
<script type="text/javascript">
function draw2() {
var c2 = document.getElementById('test2')
var ctx = c2.getContext('2d')
//头
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.arc(250, 50, 50, 0, 2 * Math.PI);
ctx.stroke(); //绘制已经定义的路径
//身体
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(250, 100); //起点
ctx.lineTo(250, 250); //终点
ctx.stroke();
//手
ctx.beginPath();
ctx.moveTo(250, 120); //起点
ctx.lineTo(300, 200); //终点
ctx.stroke();
ctx.beginPath();
ctx.moveTo(250, 120); //起点
ctx.lineTo(200, 200); //终点
ctx.stroke();
//脚
ctx.beginPath();
ctx.moveTo(250, 250); //起点
ctx.lineTo(300, 350); //终点
ctx.stroke();
ctx.beginPath();
ctx.moveTo(250, 250); //起点
ctx.lineTo(200, 350); //终点
ctx.stroke();
}
draw2();
</script>
}
效果图
主要是为了练习
就没有将那些重复的代码进行重构
用的是cancas 标签
声明了一个画布
画布的坐标位置位于第四象限,当然都是正数
就是x、y的起点都是从左上角开始的
- 起手
先找到画布
目前仅支持2d
等3d出来的时候再说
var c2 = document.getElementById('test2')
var ctx = c2.getContext('2d')
用到的属性都可以在这里找到