canvas画布基本知识点总结

HTML5的canvas元素使用JavaScript画图；

<canvas width="600" height="400">  </canvas>

canvas画图的基本框架

画布默认背景颜色为白色，大小为300*150；
若要设置画布大小，不建议在style的样式设置尺寸,效果相当于将原本300*150的画布等比例放大缩小，包括里面画的图；
建议在元素本身设置；

<body>

    <!-- 准备画布 -->

    <canvas width="600" height="400"></canvas>

    <!-- 准备绘制工具 -->

    <!-- 利用工具绘图 -->

    <script>

        // 获取元素

        var myCanvas=document.querySelector('canvas');

        // 获取上下文,绘制工具箱

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

        // 移动画笔

        ctx.moveTo(100,100);

        // 绘制直线（轨迹，绘制路径）

        ctx.lineTo(200,100);

        // 描边

        ctx.stroke();

    </script>

</body>

关于线条的问题

默认宽度为1px
默认颜色黑色
但是显示是灰色，2px宽度，原因是对其点是线的中心位置，会把线分成两个0.5px，显示的会是不饱和增加宽度；
解决方法：前或后移动0.5px即可；

当要画多条不同样式的平行线时，存在样式覆盖问题，需要开辟新路径；

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas=document.querySelector("canvas");

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

        // 画平行线

        // 蓝色 10px

        ctx.moveTo(100,100);

        ctx.lineTo(200,100);

        ctx.strokeStyle="blue";

        ctx.lineWidth=10;

        ctx.stroke();

        // 红色 20px

        ctx.beginPath();//开辟新路径

        ctx.moveTo(100,200);

        ctx.lineTo(200,200);

        ctx.strokeStyle="red";

        ctx.lineWidth=20;

        ctx.stroke();

        // 绿色 30px

        ctx.beginPath();//开辟新路径

        ctx.moveTo(100,300);

        ctx.lineTo(200,300);

        ctx.strokeStyle="green";

        ctx.lineWidth=30;

        ctx.stroke();

    </script>

</body>

当绘制图形，需要填充颜色时，使用fill()函数；默认填充颜色为黑色；

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas = document.querySelector("canvas");

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

        // 绘制一个三角形

        ctx.moveTo(100,100);

        ctx.lineTo(200,100);

        ctx.lineTo(200,200);

        ctx.lineTo(100,100);

        // 描边

        ctx.stroke();

        // 填充

        ctx.fill();

    </script>

</body>

当绘制封闭图形时，会出现起始点和lineTo的结束点无法完全闭合，有缺角
解决方法：使用canvas的自动闭合路径closePath()；

<canvas width="600" height="400"></canvas>

    <script>

        var myCanvas = document.querySelector("canvas");

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

        // 绘制一个三角形

        ctx.moveTo(100,100);

        ctx.lineTo(200,100);

        ctx.lineTo(200,200);

        // 起始点和lineTo的结束点无法完全闭合，有缺角；

        // ctx.lineTo(100,100);

        // 使用canvas自动闭合

        ctx.closePath();

        ctx.lineWidth=10;

        // 描边

        ctx.stroke();

    </script>

填充规则（非零环绕）

看一块区域是否被填充，从区域画一条直线，看和这条直线相交的轨迹；
如果是顺时针就+1，逆时针就-1；
计算所有轨迹的和，如果非0就填充，是0就不填充；
如上图1区域：轨迹和为1，填充；2区域：轨迹和为2，填充；3区域：轨迹和为0，不填充；

画虚线

<script>

        var myCanvas = document.querySelector("canvas");

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

        // 画线

        ctx.moveTo(100.5, 100.5);

        ctx.lineTo(300, 100.5);

        ctx.setLineDash([5,10,15]);

        ctx.stroke();

    </script>

画虚线：通过数组描述虚线的排列方式；
获取虚线的排列方式，获取的是不重复的那一段的排列方式；
例如：console.log(ctx.setLineDash());获取的是5 10 15 5 10 15;
括号里数字为[数字长度，空格长度，数字长度，空格长度…]；

画渐变矩形（例如黑白渐变）

主要利用for循环，逐渐改变线条颜色，矩形通过多个线条拼凑；

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas = document.querySelector("canvas");

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

        // 绘制一个矩形

        // ctx.moveTo(100, 100);

        // ctx.lineTo(255,100);

        // ctx.lineWidth='30';

        // // 颜色填充

        // ctx.strokeStyle='#fff';

        // // 从黑到白

        // ctx.stroke();

        // 线是由点构成的

        ctx.lineWidth = '30';

        //起始位置

        // ctx.moveTo(100, 100);

        for (var i = 0; i < 255; i++) {

            //画255条1px长的线；

            //每次开辟一条新路径，不然会样式覆盖

            ctx.beginPath();

            //起始位置

            ctx.moveTo(100 + i - 1, 100);

            //结束位置

            ctx.lineTo(100 + i, 100);

            ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')';

            //描边

            ctx.stroke();

        }

    </script>

</body>

网格、坐标系、点的绘制

网格即多条线按一定的规则排列组成；
坐标系绘制两条相互垂直的有向线段，箭头自己计算画三角形，进行填充即可；
点的绘制
需要注意的是，点的坐标要先定下来，用对象存储
点的绘制就是以点的坐标为中心，绘制一个正方形，进行填充，点的大小可以控制；

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas = document.querySelector('canvas');

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

        //绘制点

        //点的尺寸

        //以坐标中心绘制点

        //点坐标

        var coordinate = {

            x: 146,

            y: 357

        }

        //点尺寸

        var dottedSize = 6;

        ctx.moveTo(coordinate.x - dottedSize / 2, coordinate.y - dottedSize / 2);

        ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y - dottedSize / 2);

        ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y + dottedSize / 2);

        ctx.lineTo(coordinate.x - dottedSize / 2, coordinate.y + dottedSize / 2);

        ctx.closePath();

        ctx.fill();

    </script>

</body>

图形绘制

参数（x，y）为坐标，（w，h）为宽高；

弧度绘制

什么是弧度？
一种长度的描述单位，一个圆有2Π个弧度，一个角度等于Π/180弧度

<body>

    <canvas width="600" height="400"></canvas>

    <script>

        var myCanvas = document.querySelector('canvas');

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

        //绘制圆弧

        //1.确定圆心

        //2.确定圆的半径

        //3.确定起始位置和结束位置，确定圆弧长度和位置

        //4.确定绘制方向（一般是默认的顺时针）direction

        var w=ctx.canvas.width;

        var h=ctx.canvas.height;

        //在中心位置画一个半径150px的圆弧右下角（横坐标，纵坐标，半径，起始角度，结束角度）

        ctx.arc(w/2,h/2,150,0,Math.PI/2);

        ctx.stroke();

    </script>

</body>

绘制扇形时，圆心的确定要放在画弧形的前面；

绘制文本

ctx.font='微软雅黑’设置字体；
strokeText(text,x,y,maxWidth);
fillText(text,x,y,maxWidth);
text即要绘制的文本；
x,y为文本绘制的坐标（文本左下角）；
maxWidth设置文本的最大宽度，可选参数；
ctx.textAlign文本水平对齐方式，相对绘制坐标来说；
可取值有 left center right start默认 end
ctx.direction属性css(rtl ltr)start和end与此相关；
若为ltr则start和left表现一致；
若为rtl则start和right表现一致；
ctx.textBaseline设置基线（垂直对齐方式）；
top文本的基线处于文本的正上方，并且有一段距离；
middle文本的基线处于文本的正中间
bottom文本的基线处于文本的正下方，并且有一段距离；
hanging文本的基线处于文本的正上方，并且与文本粘合；
alphabetic默认值，文本的基线处于文本的正下方，并且穿过文字；
ideographic和bottom相似，但是不一样；
measureText()获取文本的宽度obj.width；
注意
文本样式设置要在文本描边或者填充之前；
左右对齐方式的对齐基准是文字描绘的起始坐标；

图片绘制

drawImage()
三个参数drawImage( image, x , y);

img图片对象、canvas对象、video对象
x,y图像绘制的左上角

五个参数drawImage( image, x , y , w, h);
w，h分别为图形的宽高设置，是缩放，不是截取，其余参数意义同上；
九个参数drawImage( image, x , y , w , h, x1, y1 ,w1, h1);
image是图片对象，x,y是图片定位的坐标（即原图片上图片从哪开始截取），w,h是在原图片上的图片截取区域大小，x1,y1是绘制在画布上的坐标，w1,h1是绘制图片的大小，绘制的图片不是裁剪而是前面截取图片的缩放

canvas的2d转换

移动， translate（x,y）；移动的是坐标轴，不是绘制的内容
缩放，scale（0.5,1），表示横坐标缩放0.5倍，纵坐标缩放1倍，缩放的是坐标轴，不是绘制的内容
旋转，rotate()，旋转中心默认是坐标原点；

canvas画布基本知识点总结的更多相关文章

软件项目技术点(6)——结合鼠标操作绘制动态canvas画布
AxeSlide软件项目梳理 canvas绘图系列知识点整理我们创建一个类封装了所有鼠标需要处理的事件. export class MouseEventInfo { el: HTMLElemen ...
html 5 canvas画布整理
1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）
1.Canvas 画布画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏参数:颜色值,也可用十 ...
关于使用Css设置Canvas画布大小的问题
问题分析我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...
Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录使用方法自定义参数相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
自学HTML5第四节（canvas画布详解）
canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...
“canvas画布仿window系统自带画图软件"项目的思考
"canvas画布仿window系统自带画图软件"项目的思考首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一在做项目的过程中,我发现"工具 ...
更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

随机推荐

es_python_操作
获取es索引 https://www.itranslater.com/qa/details/2583886977221264384
通过电脑浏览器调试真机h5兼容问题
前言在h5开发过程中,起初我们使用PC浏览器的手机模式打开开发中的页面,并使用控制台进行调试,但实际真机兼容性问题无法调试到:在这种情况下,我们通常使用vConsole(即移动端的控制台)来调试,但 ...
通过封装openpyxl模块实现自己的Excel操作类
""" excel类封装需要提供以下功能: 1.选择表单功能 2.读取一个单元格的数据功能 3.读取一行数据功能 4.读取表单中所有数据功能 5.往单元格中写入数据功能 ...
干货 | 携程Redis治理演进之路（二）
https://mp.weixin.qq.com/s/QTqcBZlAhp5cLRJGJVZRNw 干货 | 携程Redis治理演进之路(二) 原创技术中心携程技术 2020-12-24 ...
（Sqlserver）sql求连续问题
题目一:create table etltable( name varchar(20) , seq int, money int); create table etltarget ( name var ...
【转载】【Python模块】datetime
原文地址一.datetime模块介绍 (一).datetime模块中包含如下类: 类名功能说明 date 日期对象,常用的属性有year, month, day time 时间对象 datetim ...
Asp.netCore 3.1控制器属性注入and异步事务Aop by AutoFac
Aspect Oriented Programming(AOP)是较为热门的一个话题.AOP,国内我们都习惯称之为:面向切面编程下面直接code 干货展示:(一般人我还不告诉,嘻嘻) 1:导入相关的 ...
你应该了解的25个JS技巧
目录 1. 类型检查小工具 2. 检查是否为空 3. 获取列表最后一项 4. 带有范围的随机数生成器 5. 随机 ID 生成器 6. 创建一个范围内的数字 7. 格式化 JSON 字符串,string ...
Pycharm 使用学习
作为一个菜鸟,为了督促自己坚持学习python,记录每日学习日记是一个不错的选择电脑安装python,python可以丛网络上下载相关版本进行安装,目前我电脑安装的是pyhon 3.7.3的版本,p ...
Vue3.0网页版聊天|Vue3.x+ElementPlus仿微信/QQ界面|vue3聊天实例
一.项目简介基于vue3.x+vuex+vue-router+element-plus+v3layer+v3scroll等技术构建的仿微信web桌面端聊天实战项目Vue3-Webchat.基本上实现 ...

canvas画布基本知识点总结

canvas画图的基本框架

关于线条的问题

填充规则（非零环绕）

画虚线

画渐变矩形（例如黑白渐变）

网格、坐标系、点的绘制

图形绘制

弧度绘制

绘制文本

图片绘制

canvas的2d转换

canvas画布基本知识点总结的更多相关文章

随机推荐

热门专题