七空幻音LOGO

七空幻音

Canvas学习日记之一-绘制矩形2016-05-19 19:33:31

最近快到实习的日子了,想在加强一下技术。所以果断的去学习Canvas了,之后我会把我学习的Canvas都记录下来。

Canvas简介

Canvas是HTML5中的新标签,canvas顾名思义,画布标签。开发者可以使用canvas画布中绘制各种自己喜欢的图形,但Canvas的使用并不是直接用鼠标去画就能实现的。Canvas是通过Javascript脚本操作控制来绘制的。

Canvas可以用于制作图形,动画,游戏等各种有意思的东西。

浏览器支持

对于Canvas的支持,IE8及以下都不支持,其他浏览器大部分版本都是支持的(除非你用的很老很老的版本)。

想要绘制Canvas就先创建canvas标签,并附上id,高度宽度,设置一个基础样式即可。其余就都靠Javascript来实现了。


<canvas id="canvas" width="600" height="300" style="display:block;margin:30px auto;">您的浏览器不支持canvas</canvas>
  对于id的设置,不建议直接使用canvas,我在这里做演示,就先用canvas做id了。


在HTML5中,canvas的2d绘制环境提供了一套强大的绘图API,可以用它来实现一些精致的图形应用程序,但是一些需要数学来实现。

canvas可以绘制文本,线条,矩形,圆形及贝塞尔曲线,可以通过拖动鼠标来绘制,比如说制作一个画板。

绘制矩形及线条

canvas的2d绘图API提供了几个绘制矩形的方法。

clearRect(第一个点的X轴,第一个点的Y轴,第二个点的宽度,第二个点的高度)

strokeRect(第一个点的X轴,第一个点的Y轴,第二个点的宽度,第二个点的高度)

fillRect(第一个点的X轴,第一个点的Y轴,第二个点的宽度,第二个点的高度)

lineWidth属性 以像素为单位的线段宽度        取值范围 非零的正数 默认值 1.0

lineCap属性     浏览器如何绘制线段的端点      取值范围 butt,round,square  默认值butt

lineJoin属性      浏览器如何绘制线段的连接点  取值范围为 round,bevel,miter 默认值bevel

miterLimit属性  斜接线长度与二分之一线段宽的比值,如果斜接线的长度超过了该值,浏览器就会以bevel的方式来绘制

比如我们在canvas中绘制一个蓝色的正方形并且为20px的红色标签,连接点为round(round是有一个弧度的连接点)


<canvas id="canvas" width="600" height="300" style="display:block;margin:50px auto;">浏览器不支持canvas</canvas>
    <span id="location"></span>
    <script type="text/javascript">
      var canvas = document.getElementById("canvas");//DOM获取canvas
      var cxt = canvas.getContext("2d");//获取canvas的2d绘图环境
      cxt.fillStyle = "blue";//设置填充颜色为蓝色
      cxt.strokeStyle = "red";//设置边框颜色为红色
      cxt.lineWidth = 20;//设置线段宽度为20px
      cxt.lineJoin = "round";//设置线段连接点为round
      //在canvas一半的宽度与高度的地方填充一个宽50高50的正方形
      cxt.strokeRect(canvas.width/2,canvas.height/2,50,50);
      //在canvas一半的宽度与高度的地方绘制一个宽50高50的线段
      cxt.fillRect(canvas.width/2,canvas.height/2,50,50);
    </script>
  最后得到的效果图:


学习是靠一步一步的提升的。别放弃就行了。

下一次讲解渐变,颜色,透明度,阴影,路径等。

对于Canvas结合JS的事件处理来说更好控制Canvas中的元素。还可以制作各种有意义的东西。


0条评论

    一共 0 页

    评论

    详细图片
    载入中...