html5中canvas标签画图方法。

最新推荐文章于 2023-07-25 07:31:39 发布
最新推荐文章于 2023-07-25 07:31:39 发布
阅读量541 收藏
点赞数
分类专栏： html5&&css3 文章标签： html5 canvas js 浏览器 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011263845/article/details/44922769
版权

注意:写脚本js时必须放在canvas标签后面，

不然浏览器无法识别的



<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>canvas标签</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <canvas width="500px" height="500px" style="background:red" id="xian"></canvas>
    <script type="text/javascript">
    var xcanvas=document.getElementById("xian");
    var cxt=xcanvas.getContext("2d");

    cxt.moveTo(10, 10);
    cxt.lineTo(100, 10);
    cxt.stroke(); //画一天线段
    cxt.beginPath(); //开始路径
    cxt.arc(220, 220, 110, 0, 360, false);
    cxt.lineWidth=11;//设置画笔的宽度
    cxt.strokeStyle="yellow";//设置画笔颜色
    cxt.stroke();
    cxt.closePath();//封闭路径，划多个图片的时候必须开始封闭路径，不然会连接在一块！
    

    cxt.beginPath();
    cxt.arc(300, 300, 120, 0, 360, false);
    cxt.fillStyle="orange"
    cxt.fill();
    cxt.closePath();

    cxt.beginPath();
    cxt.rect(300, 20, 100, 100);
    cxt.stroke();
    // 矩形可以不开始结束路径

    cxt.strokeRect(300, 150, 100, 100);
    cxt.closePath();
    cxt.beginPath();
    cxt.rect(400, 200, 100, 100);
    cxt.fill();
    // cxt.closePath(); //实心矩形


    cxt.font="40px 微软雅黑";
    cxt.lineWidth=1;
    cxt.fillText("tianzi喜欢你", 88, 88);
 
    // var img=new images();
    // img.src="tianzi.png";
    // cxt.drawImage(img, 20, 330,500);//插入图片

    cxt.beginPath();
    cxt.moveTo(77, 77);
    cxt.lineTo(99, 222);
    cxt.lineTo(110, 10);
    cxt.stroke();
    cxt.closePath();


    cxt.save();//设置旋转环境
    cxt.translate(20, 20);  //在异次元中重置00点的位置
    cxt.rotate(30*Math.PI/180);//旋转角度
    cxt.beginPath();
    cxt.moveTo(20, 20);
    cxt.lineTo(100,100);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
</script>
</body>
</html>
u011263845
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML Canvas 详解，超全！！！
m0_72410588的博客
07-26 3481
HTML Canvas是HTML5新增的一个元素，它提供了一个可执行JavaScript脚本绘制图形的区域。Canvas元素通过使用JavaScript API，可以在浏览器上绘制图形、渲染动画和实现交互效果等。灵活性：Canvas提供了丰富的绘图API，可以绘制任意形状、大小和颜色的图形，适应各种需求。高性能：由于Canvas是直接操作像素的，相比其他图形技术（如SVG），Canvas在性能方面更占优势，尤其在处理大量图形和动画时表现出色。跨平台。
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 5847
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
html画布canvas标签的使用(附赠three.js)
weixin_68658847的博客
11-06 1435
html画布标签的使用
html-canvas
m0_66711291的博客
04-12 1908
一、canvas基本概念 1 创建canvas标签，在标签内设置宽度和高度。 不支持canvas的浏览器会显示写在canvas内部的内容 <canvas id="canvas" width="600px" height="400px"> 浏览器不支持显示我 </canvas> 注意： canvas和img不同，没有src和alt属性 canvas的高度为150px，宽度为300px 不要在css中设置canvas的宽高，这样会导致绘图变形 如果想要让ca
HTML中的Canvas画布的简单使用
m0_67883007的博客
12-19 2783
Canvas 表示画布，现实生活中的画布是用来作画的。HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。
玩转html5的canvas画图
03-02
<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下...
html5 canvas 画图教程案例分析
09-28
Canvas，意为画布也，虽然大家都称Canvas为html5的新标签，看起来好像Canvas属于html语言的新知识，但其实Canvas画图是通过javascript来做的。所以，如果你想学习Canvas画图，你必须要有Javascript基础
HTML5 canvas基本绘图之绘制矩形
09-28
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制矩形方法，感兴趣的小伙伴们可以参考一下
Html5之canvas详解
一只努力搬砖的打工妹纸
07-15 2778
html中新增标签canvas的介绍
Html利用Canvas绘制图形
最新发布
zls365365的博客
07-25 360
今天接到粉丝私信，询问是否可以通过Canvas绘制一些图形，然后根据粉丝提供的模板图，通过Canvas进行模拟绘制，通过分析发现，图形虽然相对简单，但是如果不借助相应的软件，纯代码绘制还是稍微费些时间。今天将绘制图形源码分享出来，仅供学习分享之用，如有不足之处，还请指正。什么是Canvas?Canvas表示一个图形容器（称之为画布），可以使用Javascript脚本来绘制图形。Canvas坐标Ca...
html自动兼容像素密度,解决 HTML Canvas 元素在高像素密度/高分辨率屏幕上显示模糊的问题...
weixin_30302513的博客
06-02 507
最近在使用 HTML Canvas 元素时发现通过 fillText() 绘制的文字明显发虚，像是以低分辨率渲染后放大所致，再仔细一检查，发现事实上包括 fillRect() 在内的其他图案也都存在相同的问题。初步推测和显示设备使用了较高的 DPI 有关，随进行了一番搜索，在 Stackoverflow 、Medium 等站点都有一些提问和回答。然而意外的是，自己能找到的一些解答，至少在自己这边并...
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
HTML学习（5）Canvas绘图
ylh的博客
04-13 748
HTML学习记录（5） Canvas绘制的应用，使用JavaScript
HTML5 Canvas详解（一）
蒲公英芽的博客
03-06 1623
简介 Canvas是 HTML5 新增的一个标签，它的主要作用是画矢量图。使用Javascript 脚本来绘制图像。canvas能做游戏，能做特别炫的效果，主要是为画图而生。 Canvas是一个实时渲染的图片，可以实现不刷新页面，对画布进行实时渲染（runtime)。 Canvas使用 1、判断用户浏览器是否支持 <canvas>标签 ​由于某些较老的浏览器（尤其是 IE9 之前的...
HTML5标签--Canvas基础（1）：
qq_51874203的博客
06-14 1072
canvas
HTML5 Canvas 教程：八、文字
gunnery的专栏
10-18 1848
八、文字 Text   8.1字体、尺寸、样式 Font, Size, and Style   为了使用HTML5画布绘制文本，我们可以使用画布上下文对象的font属性和fillText()方法。   要设置HTML5 Canvas文本的字体、大小和样式，可以将canvas上下文对象的font属性设置为包含字体样式、大小和字体族的字符串，以空格分隔。风格可以是normal、italic...
HTML Canvas绘制（实例+参考表）
喜狼狼与灰太杨的博客
08-26 497
HTML canvas 画长方形 html <h5>画板一：画一个长方形</h5> <canvas id="myCanvas" width="200" height="150" style="border:1px solid #c3c3c3;"></canvas> script var cxt=myCanvas.getContext("2d"); cxt.fillStyle="yellow"; var x = 10; var y = 10;
HTML应用开发基础篇-Canvas画布
徐小mu的博客
09-09 188
具体也不详细说那么多，直接看代码吧： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas基础操作</canvas></title> <style type="text/css"> canvas{ ...
html5中ink,html5 canvas绘制墨汁动画特效
weixin_33877981的博客
06-23 820
特效描述：html5 canvas绘制 墨汁动画特效。html5 canvas绘画点击页面墨汁动画效果代码结构1. 引入JS2. HTML代码var c = document.getElementById("c"),ctx = c.getContext("2d"),cw = (c.width = window.innerWidth),ch = (c.height = window.innerHei...
HTML5的canvas标签
06-10
好的，下面是使用HTML5的canvas标签绘制一个底边长为200，上边长为100，高为80，底下两个角是反圆角的梯形： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>梯形绘制</title> </head> <body> <canvas id="myCanvas" width="400" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 20); ctx.lineTo(250, 20); ctx.quadraticCurveTo(300, 20, 300, 70); ctx.lineTo(300, 110); ctx.quadraticCurveTo(300, 160, 250, 160); ctx.lineTo(50, 160); ctx.quadraticCurveTo(0, 160, 0, 110); ctx.lineTo(0, 70); ctx.quadraticCurveTo(0, 20, 50, 20); ctx.fillStyle = "#f9c2ff"; ctx.fill(); </script> </body> </html> ``` 运行上述代码，即可在浏览器中看到绘制的梯形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值