给大家分享下我的第一个Canvas

1.元素介绍

Canvas作用于在网页上绘制图形

2.效果图

效果图如上

3.实现代码

<canvas id="onecanvas" width="200" height="200" style="margin-top: 300px; margin-left: 650px;border:1px solid #c3c3c3;"></canvas>

var img = new Image();
img.src = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=647341054,2045984791&fm=26&gp=0.jpg';
img.onload = function() {
    var onecanvas = document.getElementById("onecanvas");
    var ctx = onecanvas.getContext("2d");
    ctx.drawImage(img, 50, 50, 100, 100);
    }

4.知识点解析

1.canvas绘制图形需要先创建元素，并指定id及给id命名 ,要记得指定canvas的width和heigh哟

     (1).创建元素标签：<canvas></canvas>

     (2).给元素标名id：<canvas id="onecanvas"></canvas>

     (3).指定元素宽高：<canvas id="onecanvas" width="200" height="200"></canvas>

2.编写js代码，canvas元素本身没有绘画能力，需要通过js代码来实现

     在<script type="text/javascript"></script>中编写js代码操控canvas

3.获取canvas的id来操作它本身

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

     注：var 是用来定义变量的关键字，onecanvas是自定义的变量名

(4).为canvas创建对应的 HTML5 对象

  var ctx = onecanvas.getContext("2d");

     注：var 是用来定义变量的关键字，ctx 是自定义的变量名

(5).把图片绘制到canvas之前需要先创建Image对象，给出需要绘制图片的路径

    var img = new Image();
    img.src = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=647341054,2045984791&fm=26&gp=0.jpg';

(6).使用onload开始绘制

    ctx.drawImage(img, 50, 50, 100, 100);
    注:drawImage(img, 50, 50, 100, 100);前两个50指定的是该绘制图片的位置，两个100是指定绘制图片的大小

5.作者有话说

本文章主要面向的是初学者，这是canvas最基础的知识点了，如果您有不懂的可以私信问我，感谢您的支持！