效果
2017-04-20 本文已影响0人
洛洛kkkkkk
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#myCanvas {
border: 10px solid red;
/*canvas的宽和高不能在样式表里设置*/
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
</body>
<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>
</html>
