H5 canvas 菊花开
发布于：2016-11-30 18:58
贴上代码：
<body>
<canvas id="myCanvas" width="1000" height="1000">
您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("myCanvas");
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
context.fillStyle = "#0000ff";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.globalCompositeOperation = 'and';
context.fillStyle = 'rgb(100,255,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
context.moveTo(dx, dy);
for (var i = 0; i < 30; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
window.onload = function(){
draw();
}
</script>
</body>
0
今日新帖
0
昨日新帖
14
帖子总数
HTML5 CSS3 JS 各种JS框架集干货合集～
Dreamweaver 2015-06-04 10:35
浓缩的精华！从零开始带你认识最新的图片格式WEBP
Dreamweaver 2015-11-18 08:56
经验之谈！前端工程师的简历到底要怎么写？
Dreamweaver 2015-11-20 17:39
进阶篇——什么时候应该避免写代码注释？
Dreamweaver 2015-11-30 15:25
不是我开玩笑，2018 年你还需要学习 JavaScript
Dreamweaver 2017-12-27 19:42
【干货】一名专业的前端开发工程师都能拿多少钱？
Dreamweaver 2018-09-07 14:59
回复:H5 canvas 菊花开