Canvas画板

1.画点：

<div id="canvas"></div>
<script>
    canvas.onclick = (e) => {  //获取e
        let div = document.createElement('div')  //document是api
        div.style.position = 'absolute'
        div.style.left = e.clientX + 'px'
        div.style.top = e.clientY + 'px'
        // div.style.border = '1px solid red'
        div.style.width = '6px'  //偶数像素易于对称
        div.style.height = '6px' //偶数像素易于对称
        //生成的div默认在内存里面
        canvas.appendChild(div)
        //给div添加一个可显示的canvas孩子
        div.style.marginLeft = '-3px'
        div.style.marginTop = '-3px'
        //将鼠标在画板创建的元素内居中
        div.style.borderRadius = '50%' //创建圆形而非方形
        div.style.backgroundColor = 'black' //黑色实心
}   //clientX是x坐标，Y是y坐标
</script>

2. 链接外围的css软件：

<link rel="stylesheet" href="style.css">

3. 外部css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#canvas{
    height: 100vh;   /*跟屏幕一样高*/
    border: 1px solid red;
         /*第一部分*/
    display: block;
    width: 100vw;   /*跟屏幕一样宽*/
}

4. 画线： (1)

<canvas id="canvas" width="" height=""></canvas>
<!-- canvas默认出现左右/上下滚动条，因为canvas是inline元素，所以设置的宽高没有什么用处 -->
<script>
    <!--onclick => onmousemove   js操作DOM很慢，跨线程交流。-->
    
    let canvas = document.getElementById("canvas");
    if (canvas.getContext){
    
        let ctx = canvas.getContext("2d");
        
        ctx.fillStyle = "rgb(200,0,0)"; 
         <!--填充样式-->
        ctx.strokeStyle = 'none';
        
        <!--ctx.fillRect(10,10,55,50);-->
        <!-- 填充矩形，（起始横坐标，起始纵坐标，宽度，高度）-->
        
        
        <!--
        console.log(document.body.clientWidth)获取屏幕宽度
        
        let documentWidth = document.body.clientWidth
        let documentHeight = document.body.clientHeight
        canvas.width = document.body.width
        canvas.height = document.body.height（1）
        
        body默认是不会占满全屏幕的
        -->
        
        canvas.width = document.documentElement.clientWidth
        canvas.height = document.cocumentElement.clientheight
        <!--获取文档宽度高度-->
        
        <!--canvas.onmousemove = (e) => {-->
            <!--当鼠标移动时，浏览器会调用canvas.onmousumove（事件相关信息），并包装成e传入onmousemove-->
            <!--console.log(e.clientX)-->
            <!--console.log(e.clientY)-->
        <!--    if(painting === true){-->
        <!--       ctx.beginPath();-->
        <!--       ctx.arc(e.clientX, e.clientY, 10, 0, 2 * Math.PI);-->
        <!--       ctx.stroke();-->
        <!--       ctx.fill();-->
        <!--    }else{-->
        <!--        console.log('什么都不做')-->
        <!--    }-->
            
        <!--}-->
        <!--这次只是在canvas里面画像素，没有新建任何的DOM节点，所以js没有操作DOM，提高了速度-->
        
        <!--let painting = false-->
        
        <!--canvas.onmousedown = () => {-->
        <!--   painting === true)    -->
        <!--}-->
        
        <!--canvas.onmouseup = () => {-->
        <!--    painting = false-->
        <!--}-->
        
        <!-----------响应式------------>
        var isTouchDevice = 'ontouchstart' in
        document.documentElement;
        console.log(isTouchDevice)
        <!--检测是否支持触屏-->
        
        if(istoucDevice){
            canvas.ontouchmove = (e) => {
                let x = e.touches[0].clientX
                let y = e.touches[0].clientY
                 <!--console.log(x,y) 可以两个值-->
                ctx.beginPath();
                ctx.arc(x, y, 10, 0, 2 * Math.PI);
                ctx.stroke();
                ctx.fill();
               
            }
        }else{
            canvas.onmousemove = (e) => {
                if(painting === true){
                    ctx.beginPath();
                    ctx.arc(e.clientX, e.clientY, 10, 0, 2 * Math.PI);
                    ctx.stroke();
                    ctx.fill();
                }else{
                    console.log('什么都不做')
                }
            }
            canvas.onmousedown = () => {
                painting === true)    
            }
        
            canvas.onmouseup = () => {
                painting = false
            }
            
        }
        
    }
    <!--canvas的宽高在一开始就确定的，如果在css里面对宽高进行更改，会使其放大，变模糊-->
</script>

(2)

<canvas id="canvas" width="" height=""></canvas>
<script>

    
    let canvas = document.getElementById("canvas");
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.cocumentElement.clientheight;
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(200,0,0)";          
    ctx.strokeStyle = 'none';


    var isTouchDevice = 'ontouchstart' in
    document.documentElement;
    console.log(isTouchDevice);
    ctx.lineWidth = 10;
    ctx.lineCap = "round";
    
    
    if(istoucDevice){
            canvas.ontouchstart = (e) => {
                let x = e.touches[0].clientX
                let y = e.touches[0].clientY
                last = [x, y]
            }
            canvas.ontouchmove = (e) => {
                let x = e.touches[0].clientX
                let y = e.touches[0].clientY
                drawLine(last[0], last[1], x, y)
                last = [x, y]
            }
        }else{
            canvas.onmousemove = (e) => {
                if(painting === true){
                    drawLine(last[0], last[1], e.clientX, e.clientY)
                    last = [e.clientX, e.clientY]
                }else{
                    console.log('什么都不做')
                }
            }
            canvas.onmousedown = () => {
                painting === true
                last = [e.clientX, e.clientY]
            }
        
            canvas.onmouseup = () => {
                painting = false
            }
            
        }
        
        
    }
    
     function drawLine(x1,y1,x2,y2) {
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.stroke();    
        
    }

</script>

【注】

• canvas.width表示html的属性 canvas.style.width表示css的属性，vm与vh都是css的属性，不能直接用在html标签中如<canvas width="100vw">是错的而<canvas style="width:100vm">是对的
• 检测是否支持触屏：

var isTouchDevice = 'ontouchstart' in
document.documentElement;
console.log(isTouchDevice)

• 触屏