Canvas绘图2

一、绘制文本

1）说明：

文本颜色使用fillStyle属性指定；
​文本字体使用font属性指定，和CSS一致；
textAlign属性指定水平方向对齐方式，
        可选值：start、left等，
textBaseline则指定垂直方向，
        可选值：top、hanging等

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）说明：

clearRect() :清空给定矩形内的指定像素 
     语法：context.clearRect(x,y,width,height)

参数	描述
x	要清除的矩形左上角的 x 坐标
y	要清除的矩形左上角的 y 坐标
width	要清除的矩形的宽度，以像素计
height	要清除的矩形的高度，以像素计

 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）说明：

drawImage()：将原图片像素的内容复制到画布上
​    第一个参数是源图片  可以是img元素或Image构造函数创建的屏幕外图片对象
​    三个参数时： 指定图片绘制的x、y坐标；
​    五个参数时： 指定图片绘制的x、y坐标，以及图片的宽度、高度；

参数	描述
img	规定要使用的图像、画布或视频
sx	可选。开始剪切的 x 坐标位置
sy	可选。开始剪切的 y 坐标位置
swidth	可选。被剪切图像的宽度
sweight	可选。被剪切图像的高度
x	在画布上放置图像的 x 坐标位置
y	在画布上放置图像的 y 坐标位置
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

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>

  效果图：