<html>
<head>
<title>初識canvas</title>
</head>
<body>
<canvas id="mc" width="400px" height="200px" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mc');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 5;//設置圓的寬度
ctx.strokeStyle = "#163B62";//設置第一個圓的顏色
ctx.beginPath();
ctx.arc(70,70,40,0,Math.PI*2,true);
ctx.stroke();
ctx.strokeStyle = "#000000";<span style="font-family: Arial, Helvetica, sans-serif;">//設置第二個圓的顏色</span>
ctx.beginPath();
ctx.arc(160,70,40,0,Math.PI*2,true);
ctx.stroke();
ctx.strokeStyle = "#BF0628";
ctx.beginPath();
ctx.arc(250,70,40,0,Math.PI*2,true);
ctx.stroke();
ctx.strokeStyle = "#EBC41F";
ctx.beginPath();
ctx.arc(110,110,40,0,Math.PI*2,true);
ctx.stroke();
ctx.strokeStyle = "#19814A";
ctx.beginPath();
ctx.a
第一講：使用html5——canvas繪製奧運五環
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
用css寫六邊形
div佈局<div class="box1"></div><div class="box3"></div><div class="box2"></div>css.box1{ width: 58px;