先上图：
然后看代码：
<body>
<canvas id="mycanvas" style="border: 1px solid;" width="1000" height="1000"></canvas>
<img src="name.jpg" id="img" width="100" height="100" />
<script type="text/javascript">
window.onload = function() {//页面加载的回调
//先获取这个元素
var mycanvas=document.getElementById("mycanvas");
//获取到这个元素的上下文对象，后面的操作都是围绕这个变量进行操作
var cnt=mycanvas.getContext("2d");
cnt.fillStyle="#aa0000"//设置实体颜色，后面需要更改的话可以重新赋值
cnt.strokeStyle="#00aa00"//设置边框的颜色
cnt.moveTo(10,10);//把指针移到 10,10 坐标位置
cnt.lineTo(50,50)//画一条线，从原位置到50,50的线段
cnt.quadraticCurveTo(80,20,110,50);//画一条贝塞尔曲线，前两个坐标是控制点的x，y坐标，后两个是终点x，y坐标
cnt.stroke();//绘制线条
cnt.fillRect(10,100,100,100);//绘制一个实心矩形，从10,100坐标绘制宽高为100的矩形
cnt.strokeRect(10,210,100,100);//绘制一个空心矩形
cnt.beginPath();//开始一个子路径的新集合
cnt.arc(200,200,50,0,Math.PI*2,false);//绘制一个圆
cnt.closePath();//结束该路径集合
cnt.fill();//按照路径集合绘制实心图形
cnt.beginPath();
cnt.arc(300,300,50,0,Math.PI*2,false);
cnt.closePath();
cnt.stroke();//绘制空心图形
cnt.beginPath();
cnt.arc(100,500,50,0,Math.PI,false);//这个bool值表示是否逆时针
cnt.closePath();
cnt.stroke();
cnt.beginPath();
cnt.arc(100,600,50,0,Math.PI,true);/*x,y,r,beginDeg,endDeg,是否逆时针*/
cnt.closePath();
cnt.stroke();
cnt.beginPath();
cnt.arc(100,700,50,0,Math.PI,true);//这表示一个半圆
//cnt.closePath();
cnt.stroke();
cnt.beginPath();
cnt.arc(100,800,50,0,Math.PI,true);
//cnt.closePath();
cnt.stroke();
//cnt.beginPath();
cnt.arc(100,900,50,0,Math.PI,true);
//cnt.closePath();
cnt.stroke();
/*在canvas绘制image*/
var img=document.getElementById("img");//获取到一个img元素
cnt.drawImage(img,500,-20);//把它画到canvas上，起始坐标是 500，-20
}
</script>
</body>
----------------------------------------------------------------------------------------------------------------------------------------------------------
好，再上图：
再上代码
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var cnt=canvas.getContext("2d");
cnt.fillStyle="aquamarine";
cnt.strokeStyle="blue";
cnt.beginPath();
cnt.arc(50,50,40,0,Math.PI*2,false);
cnt.closePath();
cnt.stroke();
/*在js 里用for循环绘制圆形集合 效果就是上图*/
for(var i=0;i<70;i++){
cnt.beginPath();
cnt.arc(300,300,10+i*5,0,Math.PI*2,false);
cnt.closePath();
cnt.stroke();
}
cnt.strokeRect(1,1,100,100);
cnt.strokeStyle="#aa0000";
/*用for循环绘制矩形集合*/
for(var i=0;i<120;i++){
cnt.strokeRect(700+i*3,0+i*3,800-i*6,800-i*6);
}
</script>
扫一扫
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
