Canvas绘图2

一、绘制文本

1）说明：

2） 示例（一行文字）：

<style>
        #box{
            border: 2px green solid;
        }
</style>
<canvas id="box" width="400px" height="200px">画布</canvas>
<script>
    var box=document.querySelector("#box")
    var ctx=box.getContext("2d")
      //fillText():在画布上绘制“被填充的”文本
      //三个参数： 绘制的内容； 起点x坐标； 起点y坐标；
    ctx.fillText("这个文字是我绘制出来的",100,100,50)   //50代表最大宽度 超过会挤压文字

      //strokeText():在画布上绘制镂空文本（无填充） 样式与css的一样
    ctx.font="30px ziti"  //字体变粗 font: italic bold 字体大小 字体库（必须要）
    ctx.strokeText("这个镂空文字是我绘制出来的",100,100,)
</script>

 

  效果图：

 

二、清除绘制

1）说明：

 2）示例（两种清屏方式）：

<canvas id="box" width="1000px" height="600px">画布</canvas>
<script>
        var box = document.querySelector("#box")
        var ctx = box.getContext("2d")
        ctx.fillStyle = "blue"
        ctx.fillRect(100, 100, 400, 500)
        //官方清屏
        ctx.clearRect(100, 100, 100, 100)
        //另一种清屏：把box的宽高重新设置一边
        //box.width=1000px  回档 重绘
</script>

三、绘制图片

1）说明：

2）示例（图片写入标签再绘制）：

<style>
        #box {
            border: 2px green solid;
        }

        img {
            width: 300px;
            height: 400px;
        }
</style>
<canvas id="box" width="800px" height="600px">画布</canvas>
<img src="../DOM/img/rose1.jpg" id="img1"><br>
<script>
        var box = document.querySelector("#box")
        var ctx = box.getContext("2d")
        img1.onload = function () {
            //当img把src的资源加载完毕了这个函数才会运行
            ctx.drawImage(img1, 100, 100, 300, 400)
        }
        //img1.onload 比 window.onload 先运行：先加载图片再加载window
</script>
<script>
        window.onload = function () {
            //当浏览器的window加载完毕了这个函数才会运行
            var box = document.querySelector("#box")
            var ctx = box.getContext("2d")
            ctx.drawImage(img1, 500, 0, 300, 400)
        }
</script>

  效果图：

3）示例（直接创建一个图片 不必写入标签）：

<style>
        #box {
            border: 2px green solid;
        }

        img {
            width: 300px;
            height: 400px;
        }
</style>
<canvas id="box" width="800px" height="600px">画布</canvas>
<script>
        var box = document.querySelector("#box")
        var ctx = box.getContext("2d")
        var img1=new Image()
        img1.src='../DOM/img/rose1.jpg'
        img1.onload = function () {
            ctx.drawImage(img1, 0, 0 ,200 ,300)
        }
        var img2=new Image()
        img2.src='../DOM/img/rose2.jpg'
        img2.onload = function () {
         ctx.drawImage(img2, 300, 200 ,300, 400)
        }
</script>

  效果图：