canvas基础

来源：互联网发布：画风好的h漫知乎编辑：程序博客网时间：2024/05/18 00:26
1.画线：lineWidth（number）粗细；strokeStyle线条颜色
2.矩形：fillRect(220,10,100,100);
3.圆：context.arc(390,60,50,0,2*Math.PI);三点钟是0，六点0.5π，顺时针为正
4.弧：context.arcTo(110,180,60,225,65);
5.文字
6.图片
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>canvas</title>    <style type="text/css" media="screen">        .box,.box2,.box3 {            margin:100px auto;            width: 450px;            height: 300px;        }        #canvas,#canvas2,#canvas3 {            border:1px dotted #6cf;        }    </style></head><body>    <div class="box">        <canvas id="canvas" width="450" height="300">        </canvas>    </div>    <div class="box2">        <canvas id="canvas2" width="450" height="300">        </canvas>    </div>    <div class="box3">        <canvas id="canvas3" width="450" height="300">        </canvas>    </div>    <script>        window.onload = function (){            var canvas = document.querySelector("#canvas");            var context = canvas.getContext("2d");            //叉            context.strokeStyle = "orange";            context.lineWidth = 10;            context.lineCap = "round";            context.moveTo(10,10);            context.lineTo(100,100);            context.stroke();            context.beginPath();            context.strokeStyle = "red";            context.moveTo(100,10);            context.lineTo(10,100);            context.stroke();            //平行线            context.beginPath();            context.strokeStyle = "pink";            context.lineWidth = 10;            context.lineCap = "round";            context.moveTo(150,10);            context.lineTo(190,30);            context.stroke();            context.beginPath();            context.strokeStyle = "yellow"            context.moveTo(120,30);            context.lineTo(160,50);            context.stroke();            context.closePath();            //矩形            context.beginPath();            context.fillStyle = "skyblue";            context.fillRect(220,10,100,100);           /* canvas.addEventListener("click",function(event){        var obj = canvas.getBoundingClientRect();        var x = event.clientX - obj.left;        var y = event.clientY - obj.top;            console.log(x)            console.log(y)        if (context.isPointInPath(x,y)) {          //alert(123);          context.fillStyle="red";          context.fill();        };    },false);*/            //圆            context.beginPath();            context.arc(390,60,50,0,2*Math.PI);            context.stroke();            //半圆            context.beginPath();            context.strokeStyle = "gray"            context.arc(60,180,50,Math.PI*1.5,Math.PI*0.5);            context.moveTo(60,130);            context.arcTo(110,180,60,225,65);            context.stroke();            //文字            context.beginPath();            context.lineWidth = 1;            context.font = "italic small-caps bold 30px arial";            var grd = context.createLinearGradient(100,270,375,270);            grd.addColorStop("0","#6cf");            grd.addColorStop("0.33","yellow");            grd.addColorStop("0.66","orange");            grd.addColorStop("1","skyblue");            context.strokeStyle = grd;            context.strokeText("来自风平浪静的明天",100,270);            //图片            context.beginPath();            var img = new Image();            img.src = "33.png";            img.onload = function () {                //context.drawImage(img,100,100); //三个参数                context.drawImage(img,140,100,160,160)                context.drawImage(img,230,170,100,100)            }        }    </script>
阅读全文
0 0