Html5-画布（canvas）之常用绘图方法介绍

画布 Demo | canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
canvas/demo.html

<!DOCTYPE HTML><html><head>    <title>画布 Demo</title></head><body>    <canvas id="canvas" width="320" height="240" style="background-color: rgb(222, 222, 222)">        您的浏览器不支持 canvas 标签    </canvas>    <br/>    <button type="button" onclick="demo();">Demo</button>

    <br />    <img id="img" alt="" src="" />

    <script type="text/javascript">

        var canvas = document.getElementById('canvas')        if (canvas.getContext) {            alert("您的浏览器支持 canvas 标签");        } else {            alert("您的浏览器不支持 canvas 标签");        }

        /*         * canvas 标签 - 画布标签         *   getContext("2d") - 获取画布标签上的 2D 上下文对象（CanvasRenderingContext2D 对象）         *   width - 画布的宽         *   height - 画布的高         *   canvas.toDataURL(type) - 返回画布数据，默认类型为 image/png         *     type - 指定返回画布数据的类型，比如可以指定为 image/jpeg，默认类型为 image/png         *         * CanvasRenderingContext2D - 画布的 2D 上下文对象，其拥有多种绘制图像的方法         *   canvas - 上下文所对应的画布         */

        var ctx = canvas.getContext('2d');        alert(ctx.canvas.id);

        function demo() {

            ctx.fillRect(20, 20, 100, 100);

            alert("width: "   canvas.width.toString());            alert("height: "   canvas.height.toString());

            alert(canvas.toDataURL("image/jpeg"));            alert(canvas.toDataURL()); // image/png            document.getElementById("img").src = canvas.toDataURL();

        }

    </script></body></html>

Html5-画布（canvas）之常用绘图方法介绍相关推荐

html5画布作品,10款面向HTML5 画布(Canvas)的JavaScript库
Processing.js Processing.js是一个开放的编程语言,在不使用Flash或Java小程序的前提下,可以实现程序图像.动画和互动的应用.Processing.js是轻量,易于了解掌 ...
HTML5画布(CANVAS)速查简表
>HTML5画布(Canvas)元素 <canvas id="myCanvas" width="500" height="300" ...
html5画布作品,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
html5好看画布,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
html画布设计,10个会让你惊叹不已的HTML5画布(canvas)技术应用
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
未来技术 html5 app,未来web浏览技术提前体验：10个会让你惊叹不已的HTML5画布(canvas)技术应用演示...
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
html5 2020视觉效果,体验未来：10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演示-UI博客精选...
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
电脑PHP动画制作画板,三分钟HTML5画布(Canvas)动画教程
此文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包. 它们都是开源的. 把鼠标放到上面的小丑脸上,然后移开,就会有如下效果. 第一步,画五官这个小丑没有耳朵和眉毛,所以只剩下三官 ...
用html5写一段文字画布中,10个让人惊叹的HTML5画布(canvas)技术效果
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...

Html5-画布（canvas）之常用绘图方法介绍

Html5-画布（canvas）之常用绘图方法介绍相关推荐

最新文章

热门文章