canvas 基础

最近老跟canvas打交道，处理图片：放大缩小，图片旋转，移动图片等等！

重新温故下canvas的基础用法！

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");

            //绘制矩形并填充
            //前两个参数是正方形原点（左上角）的（x,y）坐标值，
            //其余的两个参数是矩形的宽和高，宽是矩形向右绘制的距离，高是矩形向下绘制的距离
            //context.fillRect(x, y, width, height);
            context.fillStyle = "rgb(255,0,0)"; //rgb(红，绿，蓝);   设置填充颜色
            context.fillRect(200, 300, 200, 100);
            //绘制矩形相框
            context.lineWidth = 5; //加粗绘制线条   默认值为1
            context.strokeStyle = "blue";    //设置线条颜色
            context.strokeRect(40, 40, 200, 100);

            //绘制线条
            context.beginPath();  //开始路径
            context.moveTo(40, 40);//设置路径原点
            context.lineTo(340, 340);//设置路径终点
            context.closePath(); //结束路径
            context.strokeStyle = "#00ff00";
            context.stroke(); //绘出路径轮廓

            //绘制圆形
            context.beginPath(); //开始路径
            //前两个参数是圆点的坐标值；第三个是半径；第四个是开始角度；第五个是结束角度；
            //第六个是一个布尔值，为true时：按逆时值方向绘制；为false时：按顺时针方向绘制。
            //Canvas中的角度是以弧度为单位的，而非角度。
            //context.arc(x, y, radius, startAngle, endAngle, anticlockwise); 
            context.arc(230, 90, 50, 0, Math.PI * 2, false); //绘制一个圆形
            context.closePath(); //结束路径
            context.fill(); //填充路径

            //角度转换弧度
            var degree = 1; //1度
            var radians = degree * (Math.PI / 180); //0.0175弧度

            //绘制文本
            var txt = "Hello World!";
            context.font = "italic 30px serif";  //修改字号和字体  默认值：10px sans-serif   该值可接收与css的font完全相同的字符串
            //第一个参数：准备绘制的文本，第二三个参数：文本原点（左下角）的（x,y）针坐标
            context.fillText(txt, 20, 90);
            context.lineWidth = 1;
            context.font = "italic 60px serif";
            context.strokeText(txt, 20, 190);  //创建描边文本

            //擦除Canvas
            setTimeout(function () {
                    context.clearRect(0, 0, 500, 500);
            }, 10000);

            //如果重新设置Canvas的宽和高，Canvas会恢复到初始状态。也就等于擦除了Canvas
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500">

    </canvas>
</body>
</html>

 交流群：225443677

posted @ 2016-10-21 20:09  LI小白  阅读(277)  评论(0)    收藏  举报