HTML5-Canvas绘制（1）

HTML5-Canvas绘制（1） 绘制直线和多边形

第一步： 定义canvas 第二步： 获取cancas和context 第三步： 绘制直线 , 通过上下文绘制直线和图形

第一步： 定义canvas

第二步： 获取cancas和context 在window.onload = function() 中 通过doucument.getElementById(“canvas”)获取canvas

window.onload = function() {
            var mCanvas = document.getElementById("canvas");
            var mContext = canvas.getContext("2d");
            }

第三步： 绘制直线 , 通过上下文绘制直线和图形   mContext.moveTo(x, y) 起点   mContext.lineTo(x0, y0)定义执行的终点或者多边形的经过点

注意：

使用两个方法是状态， 并不会绘制，而是必须调用Stroke（)来绘制

设置线条的样式: 属性 lineWidth strokeStyle

mContext.lineWidth = 10;    //线条宽度
            mContext.strokeStyle = "#005588";//线条样式， 可以使用css样式， 一般使用字符串样式

使用mContext.fill() 是填充多边形的内部 如下面的三角形

mContext.fillStyle = "green";
mContext.fill();

• -

注意每个边形的结束与开始调用两个方法

** mContext.beginPath(); mContext.closePath(); **

            mContext.beginPath();
            mContext.moveTo(200, 200);//起点
            mContext.lineTo(400, 400);//终点
            mContext.lineTo(200, 400);
            mContext.lineTo(200, 200);
            mContext.closePath();

Insert title here


    Canvas 画布
    
    
    


    
        window.onload = function() {
            var mCanvas = document.getElementById("canvas");
            var mContext = canvas.getContext("2d");
            if(mContext == null){
                document.write("当前浏览器无法使用canvas");
            } 
            //使用context绘制
            //起点与终点状态
            mContext.beginPath();
            mContext.moveTo(200, 200);//起点
            mContext.lineTo(500, 500);//终点
            mContext.lineTo(200, 500);
            mContext.lineTo(200, 200);
            mContext.closePath();
            mContext.fillStyle = "green";
            mContext.fill();

            mContext.lineWidth = 10;    //线条宽度
            mContext.strokeStyle = "#005588";//线条样式， 可以使用css样式， 一般使用字符串样式
            //真正调用绘制
            mContext.stroke();

            mContext.beginPath();
            mContext.moveTo(400, 400);
            mContext.lineTo(400, 500);
            mContext.closePath();
            mContext.strokeStyle = "red";
            mContext.stroke();

        };