码迷,mamicode.com
首页 > 其他好文 > 详细

canvas学习日记一

时间:2014-08-11 09:54:01      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   使用   2014   ar   

    由于工作的需求,促进我学习html5 canvas技术,canvas是html5最强大的元素之一。使用它可以在浏览器中做一番奇妙的事情。大家或多或少都听过canvas的强大用处,我这里就不再赘述了。

    canvas的强大功能是通过canvas的context对象表现出来的,该环境变量是可以从canvas元素身上获取。

    下面先看一个canvas的例子方便讲解;在canvas上显示一个字符串,该字符串大致与canvas水平垂直居中。代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> canvas </title>
    <style type="text/css">
        body {background:#DDD;}
        #canvas {margin:10px; padding:10px;background:#FFF;border:thin inset #AAA;}
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="300">
        canvas not supported
    </canvas>
</body>
</html>

    在上述的html代码中还使用了css对canvas来设置相应的背景色等其他css属性。所以canvas跟其它的div,h1等元素一样可以设置css样式。canvas有趣的不是在于其可以设置才算是样式,而是在于javascript代码,下面我上述的html中的canvas写程序了。代码如下:

    

<script type="text/javascript">
    var canvas = document.getElementById(‘canvas‘),
        context = canvas.getContext(‘2d‘);
        
    context.font = ‘38pt Arial‘;
    context.fillStyle = ‘cornflowerblue‘;
    context.strokeStyle = ‘blue‘;
    
    context.fillText(‘Hello Canvas‘, canvas.width / 2 - 150, canvas.height / 2 + 15);
    context.strokeText(‘Hello Canvas‘, canvas.width / 2 - 150, canvas.height / 2 + 15);
</script>  

上面的javascript代码主要有三步:
1.使用document.getElementById方法获取canvas元素。
2.在canvas对象上调用getContext(‘2d‘)方法,获取绘图环境变量
3.使用绘图环境对象在canvas元素上进行绘制。

fillStyle与strokeStyle是指定图形填充,路径描边时所使用的颜色,渐变或图案。

fillText()和strokeStyle都需要3个参数:要绘制的文本内容,以及在canvas中显示文本的横纵坐标。

ps:在是设置canvas的宽度和高度的时,不能使用px后缀,虽然很多浏览器支持使用px后缀,但是从技术上来说不被canvas规范接受,而且这些取值只能是非负数。

在给canvas设置宽高的时候,有两种方法:一是直接给canvas的width和height指定属性值;二是在css中设置width和height。但是,这种设置会产生意外的效果。这里就引出了,canvas元素的大小与绘图表面的大小。如图:

bubuko.com,布布扣bubuko.com,布布扣


蒙了吧,两个元素大小一样,绘制的图却不同。其实主要是修改width和height属性来设置canvas元素的大小,这样的话,元素自身与绘画表面的大小都会被设置成属性值。而通过css来设置的width和height值只是修改了元素的大小并没有修改绘画表面的大小,因此,浏览器会将绘画表面从默认值(300*150)拉伸到修改后的值(600*300)。

canvas是个很强大的元素,我现在所知道的只是认识canvas这个元素,需要学习的还很长,day day up吧。

 

canvas学习日记一,布布扣,bubuko.com

canvas学习日记一

标签:style   blog   http   color   java   使用   2014   ar   

原文地址:http://www.cnblogs.com/qiheng/p/3903957.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!