一、初识Canvas---基本使用和图形绘制

最新推荐文章于 2024-04-20 16:29:18 发布

码媛小洋

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量257

点赞数

文章标签： html5 js

本文链接：https://blog.csdn.net/weixin_48851118/article/details/108176194

版权

初识Canvas 基础概念

在HTML文档中引入canvas

canvas元素的用法：

<canvas id="myCanvas" width="300" height="150">
</canvas>

注意：在创建canvas元素时，要特别注意width和height属性。这两个属性明确定义了canvas元素的尺寸，从而相应的定义了2D渲染上下文的尺寸。如果不使用这些属性定义canvas元素的尺寸，那么2D渲染上下文会被设置为使用默认的宽度和高度，分别是300和150像素。

理解2D渲染上下文的概念

注意：canvas元素的用途只是作为2D渲染上下文的包装器，它包含绘图和图形操作所需要的全部方法和丰富功能。绘图是在2D渲染上下文中进行的，而不是在canvas元素中进行的。可以通过canvas元素访问和显示2D渲染上下文。
坐标系统： 一般一个坐标单位等于一个像素
在这里插入图片描述
基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var canvas = $("#myCanvas");
            //jquery对象转化为DOM对象 之后才能get
            var context = canvas.get(0).getContext("2d");
        });
    </script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500">
    </canvas>
</body>
</html>

基本图形的绘制

矩形和边框的绘制：

 $(document).ready(function () {
            var canvas = $("#myCanvas");
            //jquery对象转化为DOM对象 之后才能get
            var context = canvas.get(0).getContext("2d");
            //绘制矩形
            //context.fillRect(x坐标,y坐标,宽度,高度)
            context.fillRect(300, 40, 100, 100);
            //绘制边框
            context.strokeRect(300, 40, 100, 100);
        });

在这里插入图片描述
线条的绘制：

//调用beginPath方法 
            context.beginPath(); //开始路径
            context.moveTo(40,40); //设置路径原点
            context.lineTo(340,40); //设置路径终点
            context.closePath(); //结束路径
            context.stroke(); //绘出路径轮廓

//绘制直线
            context.beginPath(); //开始路径
            context.moveTo(40,40); //设置路径原点
            context.lineTo(340,40); //设置路径终点
            context.closePath(); //结束路径
            context.stroke(); //绘出路径轮廓

在这里插入图片描述

 //绘制斜线
            context.beginPath(); //开始路径
            context.moveTo(40,40); //设置路径原点
            context.lineTo(340,340); //设置路径终点
            context.closePath(); //结束路径
            context.stroke(); //绘出路径轮廓

在这里插入图片描述
圆形的绘制：

context.beginPath(); //开始路径
//context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
//context.arc(原点x坐标，原点y坐标，半径长度，开始角度，结束角度，true逆时针/false顺时针)
context.arc(230, 90, 50, 0, Math.PI * 2, false); //绘制一个原形
context.closePath(); //结束路径
context.fill(); //填充路径

在这里插入图片描述
context.arc(原点x坐标，原点y坐标，半径长度，开始角度，结束角度，true逆时针/false顺时针)
结束可以设置任意角度实现饼形或半圆形
角度到弧度的换算：

//角度和弧度的换算 1度=π/180≈0.01745弧度,1弧度=180/π≈57.3度
var degrees = 1; //1度
var radians = degrees * (Math.PI / 180); //0.0175弧度

在这里插入图片描述

码媛小洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一、初识Canvas---基本使用和图形绘制

初识Canvas 基础概念在HTML文档中引入canvas理解2D渲染上下文的概念基本图形的绘制在HTML文档中引入canvascanvas元素的用法：<canvas id="myCanvas" width="300" height="150"></canvas>注意：在创建canvas元素时，要特别注意width和height属性。这两个属性明确定义了canvas元素的尺寸，从而相应的定义了2D渲染上下文的尺寸。如果不使用这些属性定义canvas元素的尺寸，那么2D渲染
复制链接

扫一扫