初学HTML5——画布(canvas)_html canvas里加标题-程序员宅基地

技术标签： canvas HTML5

一.canvas介绍

canvas为画布，使用canvas便可以轻松的在网页上绘制图形，文字，图片等。

二.画布的使用

1.创建画布：

HTML5中提供了<canvas>标签，使用<canvas>标签可以在网页中创建一个矩形区域的画布：

<canvas id="cavsElem" width=“400” height="300">
你的浏览器不支持canvas/*当浏览器不支持<canvas>时显示*/
</canvas>

画布本身不具有绘制功能，可以通过JavaScript脚本语言操作绘制图形的API进行绘制操作。

var canvas=document.getElementById('cavsElem');

2.准备画笔：

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

3.坐标和起点：

设置上下文开始的绘制点，也就是“从哪里开始画”。

context。moveTo(x,y);

4.绘制线条：

lineTo()方法用于定义从“x,y”的位置绘制一条直线到起点或上一线头点。

context.lineTo(x,y);

5.路径：

绘制直线确定了起始点和线头点后，便形成了一条绘制路径，如果复杂路径绘制，必须使用路径开始和结束。

context.beginPath();//开始路径
context.closePath();//结束路径

6.描边和填充

在canvas图形绘制中，路径只是草稿，真正绘制线必须执行stroke（）方法根据路径进行描边，还可以使用fill()方法进行图形的填充。

context.stroke();//描边
context.fill();//填充

7.canvas绘制图形——基本步骤

创建画布：<canvas></canvas>
准备画笔（获取上下文对象）：canvas.getContext(“2d”);
开始路径规划：context.beginPath();
移动起始点：context、moveTo(x,y);
绘制线（矩形，圆形，图片…）:context.lineTo(x,y)
闭合路径：context.closePath();
绘制描边：context.stroke();

三.绘制简单图形：

1.三角形：

示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Canvas绘制三角形</title>
</head>
<body>
<canvas id="cavsElem">
    你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
    //===============基本绘制API====================
    //获得画布
    var canvas = document.getElementById('cavsElem');
    var context = canvas.getContext('2d');  //获得上下文
    //设置标签的属性宽高和边框
    canvas.width = 200;
    canvas.height = 200;
    canvas.style.border="1px solid #000";
    //绘制三角形
    context.beginPath();        //开始路径
    context.moveTo(50,50);    //三角形，左顶点
    context.lineTo(150, 50);   //右顶点
    context.lineTo(150, 150);   //底部的点  
    context.closePath();        //结束路径
    context.stroke();           //描边路径
    //context.fill();//填充
</script>
</body>
</html>

效果如下：

在这里插入图片描述

2.绘制矩形：

canvas中分别使用strokeRect()和fillRect()方法来绘制矩形边框和填充矩形边框和填充矩形

context.strokeRect(x,y,width,heigth);//描边
context.fillRect(x,y,width,height);//填充

在canvas中还有一个相当于橡皮擦的方法，使用它可以清除矩形内绘制的内容。

context.clearRect(x,y,width,height);

示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
<canvas id="cavsElem">
    你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
    //===============绘制矩形====================
    //获得画布
    var canvas = document.getElementById('cavsElem');
    var context = canvas.getContext('2d');  //获得上下文
    //设置标签的属性宽高和边框
    canvas.width = 300;
    canvas.height = 300;
    canvas.style.border="1px solid #000";
    //绘制矩形
    context.strokeRect(0,0,100,40);
    context.fillRect(40,40,100,40);
    context.strokeRect(80,80,100,40);
    context.fillRect(120,120,100,40);
    context.clearRect(100,100,100,40);
</script>
</body>
</html>

效果如下：

在这里插入图片描述

3.canvas绘制圆形

canvas中使用arc()方法来绘制弧形和圆形

context.arc(x,y,radius,startAngle,endAngle,bAntiClockwise);

属性解释：

x,y:中心点
radius：半径长度
startAngle:开始弧度
endAngle:结束弧度
bAntiClockwise:是否逆时针

示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制圆形和弧形</title>
</head>
<body>
<canvas id="cavsElem" width='400' height="300">
    你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
    /* 绘制圆形*/
    //获得画布并上下文对象
    var context = document.getElementById('cavsElem').getContext('2d');
    context.beginPath();//开始路径
    context.arc(100,100,100,0,2*Math.PI,true);//绘制圆形，true为逆时针
    context.closePath();//关闭路径
    context.fillStyle = 'green';//设置填充颜色
    context.fill();//填充
    /* 绘制弧形*/
    context.beginPath();//开始路径
    context.strokeStyle = "#fff";//设置描边颜色
    context.lineWidth = 5;//设置线的粗细
    context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false);//绘制弧形，false为顺时针
    context.stroke();//描边
</script>
</body>
</html>

效果如下：

在这里插入图片描述

4.绘制图片

canvas中的绘制图片其实就是把一幅图放在画布中

//绘制原图
context.drawImage(image,dx,dy)
//缩放绘图
context.drawImage(image,dx,dy,dWidth,dHeight)
//切片绘图
context.drawImage(image,sx,sy,sWidth,sHeigh,dx,dy,dWidth,dHeight)

5.canvas其他方法：

clip()方法用于从原始画布剪切任意形状和尺寸的区域
save()方法用来保存画布的绘制状态
restore()方法用于移除自上一次调用save()方法所添加的任何效果

示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>clip()剪切任意形状和尺寸区域</title>
</head>
<body>
<canvas id="cavsElem" width="300" height="200" >
    你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
    //获得画布
    var canvas=document.getElementById('cavsElem');
    //设置画布边框
    canvas.style.border="1px solid #000";
    //获取上下文
    var context = canvas.getContext('2d');
    // 剪切矩形区域
    context.rect(50,20,200,120);//(x,y,width,height)
    context.stroke();//描边
    context.clip();
    // 在 clip()之后绘制圆形,只有被剪切区域的内圆形可见
    context.arc(200,100,70,0,2*Math.PI,true);//(x,y,半径,开始弧度，结束弧度，true代表逆时针绘制圆形)
    context.fillStyle="pink";
    context.fill();//填充
</script>
</body>
</html>

效果如下：

在这里插入图片描述

本文链接：https://blog.csdn.net/lxl513513/article/details/105287884

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

AltiumDesigner 中对已覆铜进行 - 开窗-处理_ad中画好的铜皮怎么开窗-程序员宅基地

文章浏览阅读6.3k次。转载自：https://blog.csdn.net/weixin_45284684/article/details/106259347AltiumDesigner 中对已覆铜进行 - 开窗-处理PCB在铜箔之上会有一层绿油覆盖层（阻焊层），开窗即是去除该阻焊层，将铜箔裸露出来。开窗作用：开窗后在裸露铜箔（导线）上加锡（加厚了导线的厚度）从而增加电流导通能力；开窗后，铜箔（导线）裸露与空气直接接触，有助于散热。1 2走线开窗、不规则开窗（区域开窗）**走线开窗示意图不规则开窗_ad中画好的铜皮怎么开窗

vue后台水印实现_v-watermark-程序员宅基地

文章浏览阅读2.4w次，点赞3次，收藏2次。vue后台水印实现Vue项目在页面添加水印功能创建watermark.js文件<template> <router-view v-waterMark="waterCode" ></router-view></template><script>import waterMark from 'common/utils/watermark';export default { directives: {_v-watermark

CSS 鼠标悬浮在图片上添加遮罩层效果的实现_css 悬浮遮罩进行操作怎么操作-程序员宅基地

文章浏览阅读2.3k次，点赞3次，收藏6次。实现的关键是 CSS 的opacity和hover，本文也主要介绍遮罩层的实现父级元素 sub-module-type 要display: block;position: relative;子级元素 mask 遮罩层 position: absolute;opacity: 0;pointer-events:none;鼠标悬浮时 opacity: 1; <div class="sub-module"> <div class="sub-modul..._css 悬浮遮罩进行操作怎么操作

ora-64203:Destination buffer too small to hold CLOB data after character set conversion.-程序员宅基地

文章浏览阅读2.8k次。ora-64203:Destination buffer too small to hold CLOB data after character set conversion.拼接字符串时过长引起，报缓冲区太小错误SELECT WM_CONCAT(field_A|| field_b) FROM table_A WHERE fie..._destination buffer too small to hold clob data after character set conversio

ThinkPHP 数据库操作(三) : 查询方法、查询语法、链式操作_thinkphp db where-程序员宅基地

文章浏览阅读3.5k次。查询方法条件查询方法where 方法可以使用 where 方法进行 AND 条件查询：Db::table('think_user') ->where('name','like','%thinkphp') ->where('status',1) ->find();多字段相同条件的 AND 查询可以简化为如下方式：Db::table('think_user') ->where('name&title','like','%_thinkphp db where

在Java中，使用HttpUtils实现发送HTTP请求_java httputils-程序员宅基地

文章浏览阅读1.4k次。HTTP请求，在日常开发中，还是比较常见的，今天给大家分享HttpUtils如何使用。阅读本文，你将收获：简单总结HTTP请求常用配置；JavaLib中HttpUtils如何使用；如何封装HTTP请求工具类。_java httputils

随便推点

VBA--类模块学习_vba class 属性-程序员宅基地

文章浏览阅读1.9w次，点赞34次，收藏204次。不废话，从基础开始学VBA的类模块。主要分下面几个部分：1．什么是类2．为什么要学习类3．类的预备知识4．创建类属性5．创建类方法6．创建类事件7．一个完整的类实例8．未完的结尾什么是类在我们身边，相同或相似的物品无处不在，从生活用品，到工业产品，……通常它们都是由同一个可以称为“模具”的东西生产出来。理解类，一般要先从对..._vba class 属性

java.sql.SQLNonTransientConnectionException_java.sql.sqlnontransientconnectionexception: data -程序员宅基地

文章浏览阅读4.8k次，点赞2次，收藏6次。SQLNonTransientConnectionException_java.sql.sqlnontransientconnectionexception: data source rejected establishm

SpringBoot静态资源访问路径_springboot配置静态资源访问路径-程序员宅基地

文章浏览阅读4.6k次。SpringBoot默认静态资源访问路径SpringBoot默认静态资源访问路径：1.2 IDEA中对应的路径将静态资源放在默认访问路劲下，可以直接访问。编写静态资源映射类Spring Boot自定义静态资源映射Spring Boot——静态资源_springboot配置静态资源访问路径

PHP json_encode斜杠跟中文不自动转义_php json_encode 双引号-程序员宅基地

文章浏览阅读4.8k次。$dataStr = str_replace("\\/", "/", json_encode($data,JSON_UNESCAPED_UNICODE)) ;_php json_encode 双引号

GhostNet网络思路整理(讨论)_ghostnet squeezeexcite-程序员宅基地

文章浏览阅读719次。GhostNet介绍GhostNet是由华为诺亚方舟实验室研究出新的网络神经框架在2020年CVPR上发布文章，该模型和代码已在GitHub上开源。GhostNet论文:link.GitHub代码:linkGhost Module[Ghost Module]我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown _ghostnet squeezeexcite

物联网应用开发实践案例-智慧农业_物联网农业项目案例-程序员宅基地

文章浏览阅读1.1k次。1. 设计需求、硬件环境介绍1.1 项目背景近几年，物联网、智能家居、AI人工智能技术发送非常迅速。在物联网技术的支撑下，如今农业逐渐走向现代化，自动化、现在智能化的农业生产成为了主流。告别“刀耕火种”的传统农业后，现代农业也正在向智慧型转变，当前智慧农业模式已经深入到农业生产的各个环节，灌溉、施肥、植保等细分领域都将与物联网、信息技术等先进科技相结合，效率、效果也将得到大大提高。要知道，所谓的“智慧农业”就是充分应用现代信息技术成果，集成应用计算机技术与网络技术、物联网技术、无线通信技术以及专家智慧_物联网农业项目案例