canvas学习（html5）画画

Posted 2021-10-18 yyy言者

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas学习（html5）画画相关的知识，希望对你有一定的参考价值。

canvas画画

- 坐标是以canvas的为标准的
画长方形：
画圆形：

1.基本语法：
html canvas 标签：
是个盒子（有长，宽）和div相同，但可以在里面画画

<canvas id="canvas1" width="400px"  height="400px"></canvas>

 <script>

var canvas=document.getElementById("canvas1");

var ctx=canvas.getContext('2d');

    </script>

坐标是以canvas的为标准的

开始画：

画长方形：

ctx.fillStyle=“颜色”；填充颜色
ctx.fillRect(矩形左上角x坐标 ,矩形左上角 y坐标, width, height, );
连续的对应的

ctx.fillStyle="black";
ctx.fillRect(0,0,20,20);

画圆形：

ctx.arc(x,y,radius,sAngle,eAngel，true)；
false/true :顺时针或者逆时针:画圆形
sAngle 默认为0方便画圆
x,y圆上的圆心坐标，radius为半径，
sAngle:绘制开始的角度。圆心到最右边点是0度，顺时针方向弧度增大。
eAngel:结束的角度，注意是弧度。
弧度和角度的转换公式： rad = deg*Math.PI/180;

ctx.stroke(); 实线绘圆的框架/或者线条
ctx.fill(); 填充颜色（上一个设置的ctx.fillStyle）
2*Math.PI：周长完整圆形
Math.PI ：半圆形

ctx.arc(150,150,30,0,2*Math.PI,true);
ctx.stroke();

半圆形
ctx.fillStyle="pink";
ctx.arc(150,150,30,0,Math.PI,true);
ctx.stroke();
ctx.fill();

画线条：

ctx.moveTo(x坐标, y坐标); 线条的起点
ctx.lineTo(x坐标, y坐标); 线条的终点

ctx.strokeStyle=“red” 线条颜色，
ctx.beginPath(); //重新开始一条路径使颜色不互相影响

ctx.moveTo(10, 10);
ctx.lineTo(10,200);
ctx.stroke();

写文字：

clearRect(X,Y, width, height)
clearRect() 方法清空给定矩形内的指定像素(清空矩形内内容)
ctx.clearRect(0, 0,600,600);
ctx.fillText(“文字”,x坐标, y坐标);

ctx.fillText("hello world!",100,200);

写了一个王字（代码）：

<style>

canvas{
    border: 2px solid black;
}


</style>
<body>
    









    <canvas id="canvas1"  width="400px" height="400px"></canvas>


<script>
var canvas=document.getElementById("canvas1");

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

console.dir(ctx);

ctx.moveTo(30,30);
ctx.lineTo(300,30);
ctx.stroke();

ctx.beginPath();

ctx.moveTo(30,170);
ctx.lineTo(300,170);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(30,300);
ctx.lineTo(300,300);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(150,30);
ctx.lineTo(150,300);
ctx.stroke();
</script>