Canvas入门篇（一）

HTML5的核心功能Canvas

一、

使用Canvas画图的前提是先在HTML5网页中使用Canvas定义一个画布；

<canvas id="myCanvas" height= xxx  width=>浏览器不支持Canvas提示语</canvas>
id为Canvas标识ID，Canvas画布宽度高度，单位PX;

二、

在JS中调用Canvas API，在定义的画布中绘画要先用JS获取Canvas对象；

var c = document.getElementById(“myCanvas”)
c即为myCanvas对象

三、

获得myCanvas对象的2d渲染上下文
var ctx = c.getContext("2d");

四、

了解坐标X,Y 左上角为0,0；X向右为+正，y向下为+正；

颜色，用RGB、16进制字符、颜色关键字如red，black等；

五

（1）画直线。

ctx.beginPath(); //调用beginPath()方法，开始绘画；
ctx.moveTo(x,y)；//调用moveTo()方法将坐标移至直线起始点；（x和y为 起为点坐标）
ctx.lineTo(x,y);//调用lineTo()方法绘制直线；（x和y为终点坐标）
ctx.stroke();//调用stroke()方法绘制图形边界轮廓，关闭绘图路径；

（2）画三角形

ctx.bginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.lineTo(100,100);
ctx.lineTo(10,10);
ctx.stroke();
(3)画圆形or圆弧

arc(x,y,r,sAngle,eAngle,counterclockwise);

x 圆中心 x 坐标。

y 圆中心 y 坐标。

r 圆半径。

sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

eAngle 结束角，以弧度计。圆的结束角度为2*Math.PI;(Math.PI 代表π，也就是3.1415926,1π=180°，2π=360°)

counterclockwise 可选参数。False = 顺时针画图，true = 逆时针画图。
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
（4）画矩形

rect(x,y,width,height);矩形左上角X,Y坐标；矩形宽度，矩形高度；

strokeRect(x,y,width,height);同上，与rect不同是，不需要调用beginPath和strok方法即可画图；

fillRect(x,y,width,height);字面意思很好理解，fill填充，同上strokeRect，默认填充黑色；fillstyle可指定填充图形内颜色；如ctx.fillstyle="red";

clearRect(x,y,width,height);clear清除，清除左上X,Y坐标，宽度，高度的矩形；
ctx.fillRect(20,20,100,50);
ctx.fillstyle="#000066"
ctx.clearRect(40,40,60,10);
未完待续......

Canvas入门篇（一）相关推荐

canvas入门实战--邀请卡生成与下载
1.前言写了很多的javascript和css3的文章,是时候写一篇canvas的了.canvas是html5提供的一个新的功能!至于作用,就是一个画布.然后画笔就是javascript.canva ...
【three.js详解之一】入门篇
开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. ...
【微信小程序】开发入门篇（二）
前言 ❤️ 所谓信仰,可能就是在人们一无所剩的时候仅有的那种东西 ❤️ [微信小程序]开发入门篇(二) 一.小程序的宿主环境 (1)宿主环境简介 1.1 什么是宿主环境 1.2 小程序的宿主环境 (2 ...
threeJs 入门篇
1.什么是threeJs 简单的说 ,就是一门绘制 3D 的 javaScript 轻量级框架: 主要采用 ,HTML5 Canvas提供硬件3D加速渲染: 于是web 端 ,就能制作出 3D 系统 ...
Lua快速入门篇（XLua教程）（Yanlz+热更新+xLua+配置+热补丁+第三方库+API+二次开发+常见问题+示例参考）
<Lua热更新> ##<Lua热更新>发布说明: ++++"Lua热更新"开始了,立钻哥哥终于开始此部分的探 ...
学习笔记---程序员练级攻略（入门篇、修养篇、专业基础篇、软件设计篇、高手成长篇）
根据极客时间左耳朵耗子整理,请忽略每一行最后的数字文章目录 1. 入门篇 47 2. 修养篇 51 3. 专业基础篇 56 4. 软件设计篇 60 5. 高手养成 63 1. 入门篇 47 1. ...
python机器人视觉编程——入门篇（下）
目录 1 全篇概要 2 图像的读取与运算基础 2.1图像的读取 2.1.1 从磁盘的图像(.jpg,.npg,.gif等等)读取 2.1.2 从摄像头里读取图像 2.2图像的运算 2.2.1 图像的数 ...
VIVE开发基础（A、快速入门篇）（Yanlz+HTC+VIVE+VR+AR+MR+XR+SteamVR+CameraRig+LightHouse+HeadSet+Teleport+立钻哥哥+）
<HTC_VIVE开发基础> 版本作者参与者完成日期备注 HTC_VIVE_V01_1.0 严立钻 2018.08.23 <HTC_VIVE开发基础>发布说明: +++ ...
女友问粉丝过万如何庆祝，我发万字长文《保姆级大数据入门篇》感恩粉丝们支持，学姐|学妹|学弟|小白看了就懂
2021大数据领域优质创作博客,带你从入门到精通,该博客每天更新,逐渐完善大数据各个知识体系的文章,帮助大家更高效学习. 有对大数据感兴趣的可以关注微信公众号:三帮大数据目录粉丝破万了新星计划申 ...

Canvas入门篇（一）

Canvas入门篇（一）相关推荐

最新文章

热门文章