Canvas标签初探

最新推荐文章于 2025-09-10 16:16:57 发布

转载最新推荐文章于 2025-09-10 16:16:57 发布 · 48 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yanshanshuo/p/3870985.html

文章标签：

#javascript #ViewUI

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

<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>