HTML5页面绘图

canvas 标签:
获取画笔:

对象.getContext("2d")
制定画笔Syte:

context.fillStyle = "red";
context.fill();

context.strokeStyle = "blue";
context.stroke();
设置线条的宽度:


lineWidth=2 后面以像素单位

绘制有阴影的图形:

context.shadowBlur = 15;
context.shadowColor = "black";
绘制有渐变的图形:

context.createLinearGradient(10,10,110,10);起始位置和结束位置
addColorStop(0,"white");前面的图的百分比0-1
context.fillStyle = linearGradient;
绘制矩形:

context.fillRect(48,65,120,200);

擦除:

context.clearRect(0,0,200,100);

绘制圆形:

context.arc(0,0,0,0,0);
起始的X,Y,半径,起始角,弧度,逆时针:true 或者顺时针:False

绘制线条:

context.moveTo();
context.lineTo();

重置路径,开始新路径:

beginPath()

重置所有设置:

restore()
初始化起点位置:

translate() 坐标X和Y

 

例文:

<body>
<div>
<canvas id="cs" width="1300" height="600">
</canvas>
</div>
</body>

 

 

 

<script>

window.οnlοad=function(){
android()
};
var cs = document.getElementById("cs");
//获取画笔
var context = cs.getContext("2d");

function android(){
context.lineWidth=25;
context.translate(400,150);
//绘制机器人身体
context.beginPath();
context.fillStyle = "#59cc41";
context.strokeStyle = "#59cc41";
context.lineJoin="round";
context.moveTo(0,0);
context.lineTo(80,0);
context.lineTo(80,90);
context.lineTo(0,90);
context.closePath();
context.fill();
context.stroke();
//绘制机器人的双手
context.beginPath();
context.lineWidth=2;

context.moveTo(-45,0);
context.lineTo(-45,60);
context.quadraticCurveTo(-35,70,-25,60);
context.lineTo(-25,0);
context.quadraticCurveTo(-35,-15,-45,0);

context.moveTo(105,0);
context.lineTo(105,60);
context.quadraticCurveTo(115,70,125,60);
context.lineTo(125,0);
context.quadraticCurveTo(115,-15,105,0);
context.fill();
//绘制机器人的双脚

context.moveTo(10,90);
context.lineTo(10,140);
context.quadraticCurveTo(20,150,30,140);
context.lineTo(30,90);


context.moveTo(50,90);
context.lineTo(50,140);
context.quadraticCurveTo(60,150,70,140);
context.lineTo(70,90);
context.fill();
//绘制机器人的头部
context.beginPath();
context.arc(40,-20,50,0,Math.PI,true);
context.fill();
//绘制机器人的眼睛
context.beginPath();
context.fillStyle = "black";
context.arc(20,-40,5,0,2*Math.PI,true);
context.fill();
context.beginPath();
context.fillStyle = "black";
context.arc(60,-40,5,0,2*Math.PI,true);
context.fill();
//绘制机器人的天线
context.beginPath();
context.lineWidth=5;
context.moveTo(10,-90);
context.lineTo(20,-60);
context.moveTo(70,-90);
context.lineTo(60,-60);
context.stroke();
}

</script>

转载于:https://www.cnblogs.com/tk900123/p/4805033.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值