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

Canvas标签初探

时间:2014-07-27 11:04:42      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

学了一点基础知识,感觉好神奇,全部练习代码

<html>
    <head>
        <meta http-equiv=Content-Type content="text/html;charset=utf-8">
        <title>Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300</title>
        <style> 
            body {
                background: #dddddd;
            }
            #canvas {
                margin: 10px;
                padding: 10px;
                background: #ffffff;
                border: thin inset #aaaaaa;
            }
            #canvas2 {
                margin: 10px;
                padding: 10px;
                background: #ffffff;
                border: thin inset #aaaaaa;
                width: 600;
                height: 300;
            }
      </style>
    </head>
    <body>
        <canvas id=canvas width=600 height=300>
            Canvas not supported
        </canvas>
        <br/>

        1.canvas有两个大小,一个是元素本身的大小,一个是绘图的大小.<br/>
        canvas默认绘图大小300,150.设置CSS元素后,会将图像拉伸<br/>


        <canvas id=canvas2 class=canvas2 ><br/>
            Canvas not supported
        </canvas>
        <br/>
        2.canvas的toDataURL(type,质量)返回图像路径,可以作为img的src显示。<br/>
        <img id=img2 src=""><br/>
        3.canvas.getContext()方法返回canvasRenderingContext2D对象,属性和方法<br/>
        <a href=http://www.w3school.com.cn/jsref/dom_obj_canvasrenderingcontext2d.asp target=_blank>点这里!</a>
    </body>
    <SCRIPT TYPE="text/javascript">
        var canvas = document.getElementById(canvas),
            context = canvas.getContext(2d);
        context.font = 38pt Arial;
        context.fillStyle = #a1a1a1;//字体填充的颜色
        context.strokeStyle = red;//字体描边颜色
        context.fillText("Hello Canvas", canvas.width / 2 - 150,
            canvas.height / 2 + 15);
        context.strokeText("Hello Canvas", canvas.width / 2 - 150,
            canvas.height / 2 + 15);
        //alert(canvas.toDataURL("",1));
        var image = canvas.toDataURL("image/png",0.1);//返回图像
        document.getElementById("img2").src=image;//指定图像

        var canvas2 = document.getElementById(canvas2),
            context2 = canvas2.getContext(2d);
        context2.font = 38pt Arial;
        context2.fillStyle = #a1a1a1;//字体填充的颜色
        context2.strokeStyle = red;//字体描边颜色
        context2.fillText("Hello Canvas", canvas2.width / 2 - 150,
            canvas2.height / 2 + 15);
        context2.strokeText("Hello Canvas", canvas2.width / 2 - 150,
            canvas2.height / 2 + 15);
    </SCRIPT>
</html>

准备在石家庄从事HTML5游戏开发

Canvas标签初探

标签:

原文地址:http://www.cnblogs.com/yanshanshuo/p/3870985.html

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