Canvas-未完

fillStyle 填充颜色，storkeStyle 描边颜色

strokeRect()方法-绘制矩形

<canvas id="drawing" width="200" height="200">A drawing of something </canvas>

window.onload = function () {

            var drawing = document.getElementById("drawing");

            //确定浏览器是否支持

            if (drawing.getContext) {

                var context = drawing.getContext("2d");

                context.fillStyle = "rgba(0, 0, 255, 0.5)";

                context.strokeStyle = "#ff0000";

                context.fillRect(10, 10, 50, 80);

            }

        }

toDataURL-将图片转换为编码

window.onload = function () {

            var drawing = document.getElementById("drawing");

            //确定浏览器是否支持

            if (drawing.getContext) {

                var context = drawing.getContext("2d");

                context.fillStyle = "rgba(0, 0, 255, 0.5)";

                context.strokeStyle = "#ff0000";

                context.fillRect(10, 10, 50, 80);

            }

            //获取转换的数据URI

            var imgURI = drawing.toDataURL("image/png");

            var img = document.createElement("img");

            img.src = imgURI;

            document.body.appendChild(img);

        }

Canvas-未完

strokeRect()方法-绘制矩形

toDataURL-将图片转换为编码

推荐阅读