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>

页面上已经存在的图片,是不需要加载的,因为他已经加载出来了,用选择器直接获取就可以加载到canvas中.

最近老跟canvas打交道,处理图片:放大缩小,图片旋转,移动图片等等!

sx,sy,sw,sh: s就是source的意思,这四个参数是第三种调用方式特有的, 第三种调用方式就是允许裁剪图片的某部分,然后在加载到canvas画布上.

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

金沙官网线上 1

 交流群:225443677

金沙官网线上 2

image:就是图片对象, 这个图片对象可以是动态创建出来的,也可以是页面上已经存在的图片元素

drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh )

3,调整图片大小

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         oImg = document.querySelector( "img" );
12         oGc.drawImage( oImg, 100, 100 );
13 }
14 </script>
15 </head>
16 <body>
17 <canvas id="canvas" width="500" height="400"></canvas>
18 <img src="./img/mv.jpg" alt="金沙官网线上 3">
19 </body>

如果是动态创建的图片,也没有问题

2,把页面上已经存在的图片加载进来

金沙官网线上, 接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的内容是canvas开发,特别是游戏中,比较常用的内容:图片处理。在游戏中的资源大多数都是加载图片.

1     var oCanvas = document.querySelector( "#canvas" ),
2         oGc = oCanvas.getContext( '2d' ),
3         oImg = document.querySelector( "img" );
4         oGc.drawImage( oImg, 100, 100, 100, 100 );
1     var oCanvas = document.querySelector( "#canvas" ),
2         oGc = oCanvas.getContext( '2d' );
3 
4     var oImg = new Image();
5     oImg.src = './img/mv.jpg';
6     oImg.onload = function(){
7         oGc.drawImage( oImg, 100, 100, 100, 100 );
8     }

本文由金沙官网线上发布于Web前端,转载请注明出处:canvas 基础金沙官网线上:

您可能还会对下面的文章感兴趣: