登录

Canvas入门,绘制简单的图形(一)

Canvas是HTML5中新增的功能,出来好久了,一直没去学习,趁着今天有空,特地来学习了解一下。

大神请绕道,感谢感谢^_^...........

这不趁着自己对Canvas还有一点点记忆,做了个小练习:Canvas画板

还是老套路,首先了解canvas几个常用属性跟方法:

1513666255314067.png

1.首先是在HTML中使用标签:

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
你的浏览器不支持Canvas画布,请升级或更换浏览器
</canvas>

2.然后我们便需要结合JavaScript在画布中绘制:

<script>
    //在画布中画一条直线
    var c=document.getElementById("myCanvas");//获取画布的id
    var ctx=c.getContext("2d");//指定绘制2d图形
    ctx.beginPath(); //开始绘画
    ctx.moveTo(0,0);//绘画起点路径
    ctx.lineTo(300,150);//画到指定点的路径
    ctx.beginPath(); //结束绘画,此方法可有可无
    ctx.stroke();//绘制定义好的路径
</script>

3.将以上两点结合起来我们便可以得到以下效果:

213.PNG

4.给绘制好的图像填充颜色

实例:绘制一个正方形并且填充颜色

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
你的浏览器不支持Canvas画布,请升级或更换浏览器
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath(); //开始绘画
    ctx.moveTo(20,20);//从x轴为20,y为20的点开始绘制
    ctx.lineTo(20,100);//添加新点20,100绘制一条竖线
    ctx.lineTo(100,100);//添加新点100,100绘制一条横线
    ctx.lineTo(100,20);//添加新点100,20绘制一条竖线
    ctx.lineTo(20,20);//添加新点20,20绘制一条横线
    ctx.fillStyle='red';//设置填充的颜色为红色
    ctx.fill();//填充
    ctx.stroke()//绘制
</script> 
</body>
</html>

效果图:

3453.PNG

5.区别strokeStyle

实例:绘制一个边框为蓝色的三角形,无填充

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
你的浏览器不支持Canvas画布,请升级或更换浏览器
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath(); //开始绘画
    ctx.moveTo(20,20);//从x轴为20,y为20的点开始绘制
    ctx.lineTo(20,100);//添加新点20,100绘制一条竖线
    ctx.lineTo(100,100);//添加新点100,100绘制一条横线
    ctx.lineTo(100,20);//添加新点100,20绘制一条竖线
    ctx.strokeStyle='blue';//设置笔触的颜色为蓝色
    ctx.stroke()//绘制
</script> 
</body>
</html>

效果图:

123.PNG

6.利用Canvas自带的方法绘制矩形跟圆形

JavaScript语法:

context.rect(x,y,width,height);//绘制矩形的语法 

x矩形左上角的 x 坐标    
y矩形左上角的 y 坐标 
width矩形的宽度,以像素计    
height矩形的高度,以像素计  

context.arc(x,y,r,sAngle,eAngle,counterclockwise);//绘制圆的语法

x圆的中心的 x 坐标。    
y圆的中心的 y 坐标。    
r圆的半径。    
sAngle起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。    
eAngle结束角,以弧度计。  
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。  

实例:绘制一个矩形

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);//绘制一个150*100的矩形
//绘制一个填充红色的矩形
//ctx.fillStyle="red";
//ctx.fillRect(20,20,150,100);
ctx.stroke();
</script> 
</body>
</html>

效果图:

12313.PNG

实例:绘制一个圆

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script> 
</body>
</html>

效果图:

3424.PNG

注意:beginPath()和closePath()不一定要成对使用。beginPath()单纯的表示开始规划一段新的路径;closePath()表示结束当前路径,若当前路径没闭合则自动闭合。

另外:context.fill()方法对于没有闭合的图形,会自动将其首位相连,再填充。所以即使画的时候没有使用closePath()来闭合图形,也是可以填充的。

以上就是本文的全部内容,看了这些是不是很简单。

选择赏赐方式:

×

多少都是心意,感谢大家

选择分享方式:

×

扫一扫分享到微信朋友圈

标签: canvascanvas画布

本文标题:Canvas入门,绘制简单的图形(一)

本文地址:https://www.zbpnice.cn/post/148.html

温馨提示:文章内容系作者个人观点,不代表柏平博客对观点赞同或支持。

版权声明: 本文为原创文章,创建于2年前 (2017-12-19),版权归 柏平 所有,欢迎分享本文,转载请保留出处!

还没有留言,还不快点抢沙发?

发表评论: