您的位置：首页 > Web前端 > HTML5

html5-Adidas图标绘制

2016-05-11 12:55 926 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>绘制图形</title>

<script>

function draw(id){

var c=document.getElementById('canvas');

var cxt=c.getContext("2d");

//保存当前绘图状态

cxt.save();

//开始绘制打钩的轮廓

cxt.beginPath();//创建开始绘图路径

cxt.moveTo(53,0);

//绘制上半部分曲线

cxt.quadraticCurveTo(30,79,99,78);

cxt.lineTo(371,3);

cxt.lineTo(74,134);

cxt.quadraticCurveTo(0,124,53,0);

cxt.fillStyle="pink";

cxt.fill();

cxt.lineWidth=3;

//连接处平滑

cxt.lineJoin='round';

cxt.strokeStyle="blue";

cxt.stroke();

cxt.restore();//恢复原有的绘图状态

cxt.closePath();

}

</script>

</head>

<body onload="draw('canvas')">

<canvas id="canvas" width="375" height="132" style="border:1px solid blue;"></canvas>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航