標籤：csharp contex 繪製圖形 idt 繪製 on() blog fill dem
demo.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas</title> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="demo.js"></script></head><body><canvas id="mycanvas" width="600px" height="800px" > <span>你的瀏覽器不支援canvas</span></canvas></body></html>
demo.js
window.onload=function() { createcanvas(); drawcanvas();} function createcanvas() { var CANVAS=document.getElementById(‘mycanvas‘); context=CANVAS.getContext(‘2d‘); }function drawcanvas() { context.fillStyle="#eeeeef"; context.fillRect(0,0,600,800); for(var i=0;i<=10;i++) { context.beginPath(); context.arc(i*25,i*25,i*10,0,Math.PI*2,true); context.closePath(); context.fillStyle="rgba(255,0,0,0.25)"; context.fill(); }}
效果：
2017-09-08 08:36:44
HTML5 canvas繪製圖形
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
