Html5中Canvas绘图

最新推荐文章于 2024-06-03 21:34:00 发布
最新推荐文章于 2024-06-03 21:34:00 发布
阅读量1.6k 收藏
点赞数
分类专栏： [---h5+c3---] 文章标签： html5 api canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dzy21/article/details/52077600
版权

Canvas绘图

Canvas的基本API

制作矩形

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Canvas</title>

</head>

<body>

   <canvas width="500" height="300" style="border: 1px solid blueviolet;">

      <!--如果浏览器不支持会显示下面文字-->

      浏览器不支持Canvas

   </canvas>

   <script type="text/javascript">

      //获取canvas标签

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

      //获取绘制环境

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

      //填充颜色，如同更换画笔一般

      ctx.fillStyle = '#ff0';

      //绘制矩形

      ctx.fillRect(100,100,150,100);

      console.log(cas);

   </script>

</body>

</html>

使用路径绘制图形

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Canvas</title>

</head>

<body>

   <canvas width="500" height="300" style="border: 1px solid blueviolet;">

      <!--如果浏览器不支持会显示下面文字-->

      浏览器不支持Canvas

   </canvas>

   <script type="text/javascript">

      //获取canvas标签

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

      //获取绘制环境

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

      //路径开始

      ctx.beginPath();

      //路径规划

      ctx.moveTo(100,100); //移动画笔，没有路径线

      ctx.lineTo(200,100); //在画布上移动画笔，如同画画

      ctx.lineTo(100,200);

      ctx.lineTo(150,0);

      ctx.lineTo(200,200);

      ctx.lineTo(100,100);

      //路径结束

      ctx.closePath();

      //填充路径

      ctx.fillStyle = 'red';

      ctx.fill();

   </script>

</body>

</html>

效果图：

制作圆形、扇形

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Canvas</title>

</head>

<body>

   <canvas width="500" height="300" style="border: 1px solid blueviolet;">

      <!--如果浏览器不支持会显示下面文字-->

      浏览器不支持Canvas

   </canvas>

   <script type="text/javascript">

      //获取canvas标签

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

      //获取绘制环境

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

      //路径开始

      ctx.beginPath();

      //路径移动到圆心

      ctx.moveTo(100,100);

      //画一个整圆

      //ctx.arc(100,100,50,0,360);

      //根据传递的参数画图

      ctx.arc(100,100,50,0,getHuDu(120));

      //路径结束

      ctx.closePath();

      //填充路径

      ctx.fillStyle = 'red';

      ctx.fill();

      //获取弧度

      function getHuDu(hd){

         return hd*Math.PI/180;

      }

   </script>

</body>

</html>

效果图：

制作文字

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Canvas</title>

</head>

<body>

   <canvas width="500" height="300" style="border: 1px solid blueviolet;">

      <!--如果浏览器不支持会显示下面文字-->

      浏览器不支持Canvas

   </canvas>

   <script type="text/javascript">

      //获取canvas标签

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

      //获取绘制环境

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

      //绘制文字

      ctx.font = '20px 宋体';

      ctx.align = 'center';

      ctx.fillText('午_夜博客',200,150);

   </script>

</body>

</html>

 效果图：

绘制图片

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Canvas</title>

</head>

<body>

   <canvas width="500" height="300" style="border: 1px solid blueviolet;">

      <!--如果浏览器不支持会显示下面文字-->

      浏览器不支持Canvas

   </canvas>

   <script type="text/javascript">

      //获取canvas标签

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

      //获取绘制环境

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

      //获取图片

      var img = new Image();

      img.src = 'img/te.png';

      img.onload = function(){

         //绘制图片

         ctx.drawImage(img,0,0,500,300);

      }

   </script>

</body>

</html>

效果图：


午-夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HTML中的canvas绘制图形
Jimmy Huang's Blog
03-07 806
*以下为笔记 一、什么是canvas HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 二、如何使用canvas 1、建立一个canvas实例 <canvas id="m...
HTML 的canvas画图
qq_27009517的博客
07-21 160
HTML5和css3的权威指南 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
HTML5 Canvas 绘图教程一
最新发布
一名全栈开发工程师
06-03 797
HTML5 的canvas元素提供了一种在网页上进行绘图的方式，通过 JavaScript，可以绘制图形、处理图像甚至创建动画和游戏。
Canvas学习记录
小康博客
09-14 437
Canvas的基本用法 canvas元素 <canvas id="tutorial" width="150" height="150"></canvas> canvas元素与img元素相似，但其没有src属性和alt属性。其只有两个属性width（默认值300像素）和height（默认值150像素）。如果没有为其设置宽度和高度时，那么将初始化为默认大小。 该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
HTML5 Canvas绘图
It_sharp的博客
01-14 688
Canvas标签 HTML5 标签用作绘图的容器，使用JS脚本来完成绘图。 如下代码可以获取绘制上下文，类似于C#中的Graphics g = e.Graphics获取画布 var c = document.getElementById(&amp;amp;quot;Canvas&amp;amp;quot;); var ctx = c.getContext(&amp;amp;quot;2d&amp;amp;quot;); 绘制的对象有文本、线条、矩形、圆形等
html5<canvas>画图
xu_ya_fei的专栏
06-02 2784
html5<canvas>画图
HTML5 canvas基本绘图之填充样式实现
09-27
`<canvas>`标签在HTML5中被引入，用于在网页上创建一个可编程的画布。通过给`<canvas>`标签设置`id`、`class`、`style`等属性，我们可以像操作其他HTML元素一样操作它。另外，`<canvas>`标签的`width`和`height`属性...
HTML5 canvas基本绘图之绘制矩形
09-28
HTML5中的<canvas>标签是用来进行图形绘制的一个元素，它提供的绘图区域允许我们使用JavaScript来绘制各种图形。本文将详细介绍如何使用canvas元素来进行基本的矩形绘制。 首先，canvas元素本身只是一个容器，它...
html5 canvas实现绘图板
05-12
html5 canvas绘图板，实现了如下功能： 1、调色（只有固定的几种颜色）、 2、改变笔触粗细、 3、撤销、 4、保存图片到本地、 5、改变画布颜色
一波HTML5 Canvas基础绘图实例代码集合
09-28
在本篇文章中，我们将探讨Canvas的基础绘图实例，包括圆形、矩形、圆角等基本图形的绘制方法。 首先，我们需要获取Canvas元素并创建2D渲染上下文。这是通过以下代码实现的： ```javascript var canvas = document....
jCanvas.js html5中canvas 绘图插件
12-23
压缩版jCanvas.js HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形。
利用HTML实现简单的网页画图项目
03-24
利用canvas进行简单的网页画图，适合刚接触的人
使用双缓冲绘画.rar .
08-28
使用双缓冲绘画.rar使用双缓冲绘画.rar使用双缓冲绘画.rar
HTML canvas系列-画图（5）
木梓油
05-21 133
HTML canvas系列-画图（5）1、画图2、画图并设置图像大小3、裁剪图像 1、画图 方法定义 context.drawImage(img,x,y); 参数 说明 img 图像 x 图像在画布开始的x坐标 y 图像在画布开始的y坐标 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>画图</title> &
HTML5画布(canvas)绘制图形
m0_61843988的博客
07-15 4490
canvas 元素用于在网页上绘制图形 canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。 默认情况下它在网页上是一块空白区域，默认大小300*150 注意：canvas画布默认背景色为透明色，可以自行定义背景色...
HTML5基础之canvas绘图(一)
zhxiong1994的博客
09-22 566
canvas是html5中新定义的标签，它是提供一张画布，通过JavaScript来绘制图形。值得注意的是canvas 元素本身是没有绘图能力的，所有的绘制工作必须要是在 JavaScript 内部完成的。
探索HTML Canvas：创意绘图与网页美化（秒懂网页Canvas绘图）
百赢出品，必属精品
04-08 1372
canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。Canvas是HTML5提供的一个元素，用于通过JavaScript绘制图形。绘制图形：Canvas可以绘制各种形状、线条、文本和图像，使开发者能够灵活地创建图形效果。动态更新：Canvas提供了API，开发者可以通过JavaScript动态更新画布上的图形，实现实时的数据可视化和动画效果。高性能。
Html利用Canvas绘制图形
绳锯木断，水滴石穿，专心写文，无问西东！！！
07-17 888
今天接到粉丝私信，询问是否可以通过Canvas绘制一些图形，然后根据粉丝提供的模板图，通过Canvas进行模拟绘制，通过分析发现，图形虽然相对简单，但是如果不借助相应的软件，纯代码绘制还是稍微费些时间。Canvas默认提供了简单图形绘制功能，如直线，矩形，圆弧，贝塞尔曲线等，通过接口可以绘制简单的图形，复杂的图形需要通过简单的图形进行不同组合来实现。注意，Canvas不仅可以绘制图形，也可以添加图像元素。注意：前两句为创建Canvas上下文对象，先获取画布控件，再创建对象，然后就可以利用对象创建图形。
HTML5 Canvas 2D绘图指南
HTML5 Canvas 是一个强大的绘图工具，允许开发者通过JavaScript在网页上绘制图形，实现动态视觉效果和交互性。Canvas API 提供了一个2D渲染上下文，通过这个上下文，我们可以执行各种绘图操作。 1. **Canvas接口...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值