効果
3284 ワード
<style type="text/css">
#myCanvas {
border: 10px solid red;
/*canvas */
}
</style>
<canvas id="myCanvas" width="600" height="600"/>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
var arr=["red","blue","black","yellow"]
var deg = Math.PI/180;
// for(var i = 0; i < 4; i++) {
// context.beginPath();
// context.moveTo(50+i*20, 50+i*20);
// context.lineTo(50+i*20, 300+i*20);
// context.lineTo(300+i*20, 300+i*20);
// context.lineTo(300+i*20, 50+i*20);
// context.strokeStyle = arr[i];
// context.fillStyle=arr[i];
// context.fill();
// context.closePath();
// context.lineWidth = 2;
// context.stroke();
// }
// context.strokeStyle = arr[0];
// context.strokeRect(50,50,200,100);//x,y,w,h
// context.fillStyle=arr[0];
// context.fillRect(50,50,200,100);
// context.lineWidth = 50;
// context.strokeStyle = "black";
// context.strokeRect(50,50,200,200);
// context.fillStyle = "red";
// context.fillRect(50,50,200,200);
//
// x，y， ， ， ， / （ ）
// context.beginPath();
// context.lineWidth=20;
// context.strokeStyle = "black";
// context.arc(300,300,100,0,360*deg,true);
// context.fillStyle = "royalblue";
// context.fill();
// context.stroke();
//
// context.font="100px Arial";
//// context.strokeStyle = "red";
//// context.strokeText("Hello",100,100);
////
//// context.fillStyle = "#007AFF";
//// context.fillText("world",200,200);
//
// //
//
// var gradient = context.createLinearGradient(0,0,400,0);// ，
// gradient.addColorStop(0,"red");
// gradient.addColorStop(0.5,"green");
// gradient.addColorStop(1,"blue");
//
// context.fillStyle = gradient;
//// context.fillRect(0,0,600,600);
// context.fillText("hellow world",0,100);
// var gradient = context.createRadialGradient(300,300,0,300,300,300);
// gradient.addColorStop(0,"pink");
// gradient.addColorStop(0.2,"lightgoldenrodyellow");
// gradient.addColorStop(1,"orange");
//
// context.fillStyle = gradient;
// context.fillRect(0,0,600,600);
//
// context.font="70px Arial";
// context.shadowColor = "#00BFFF";
// context.shadowBlur = 30;
// context.shadowOffsetX = 10;
// context.shadowOffsetY = 10;
// context.fillStyle = "burlywood";
// context.fillText("hellow world",50,100);
</script>
</code></pre>
</article>
</div>
</div>