42canvas元素

最新推荐文章于 2024-03-02 13:59:14 发布
最新推荐文章于 2024-03-02 13:59:14 发布
阅读量182 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23666533/article/details/75634345
版权
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>1canvas元素</title>
<style  type="text/css">
canvas{ background:gray}
</style>
</head>

<body>
<canvas  id="mycanvas"  width="1000px" height="1000px">提示：浏览器不支持 </canvas>
<!--定义一块"画布"，操作在这块"画布"上进行，左上角坐标为（0，0）右下角为（1000，1000）-->
<script  type="text/javascript">
var canvas=document.getElementById('mycanvas');//定义变量获取画布DOM
var context=canvas.getContext('2d');//设置绘图环境为2d

context.strokeStyle="#ffffff";//设置线段的颜色
context.lineWidth=5;//线宽
context.moveTo(0,0);//设置起点
context.lineTo(50,50);//设置终点
context.lineTo(50,70);//设置终点
context.closePath();//从当前点回到起始点
context.stroke();//开始绘制
//注意函数大小写！！！！！！！！！！！！！！！！

//空心矩形
context.beginPath();//开始另一个图形
context.strokeStyle="green";//设置线段的颜色
context.rect(100,100,150,150);//(起点X，起点Y，宽，高)
context.stroke();//开始绘制

//空心矩形
context.beginPath();//开始另一个图形
context.strokeStyle="red";//线段的颜色
context.strokeRect(300,100,150,150);//(起点X，起点Y，宽，高)

//填充矩形
context.beginPath();//开始另一个图形
context.fillStyle="red"//设置填充颜色
context.rect(500,100,150,150);//设置矩形的(起点X，起点Y，宽，高)
context.fill();//绘制填充图形

//填充矩形
context.beginPath();//开始另一个图形
context.fillStyle="green";//设置填充颜色
context.fillRect(700,100,150,150)//绘制填充矩形

//半圆半缝合
context.beginPath();//开始另一个图形
context.lineWidth=2;//线宽
context.strokeStyle="red";//线段的颜色
context.fillStyle="green";//设置填充颜色
context.arc(100,400,50,0,Math.PI,true);
//(圆心x，圆心y，半径，开始角度（0度在时钟3点钟方向）（弧度），结束角度（弧度），true顺时针，false逆时针)
context.stroke()//开始绘制
context.fill();//绘制填充图形


//半圆完全缝合
context.beginPath();//开始另一个图形
context.arc(300,400,50,0,Math.PI,true);
context.closePath();//从当前点回到起始点
context.stroke()//开始绘制
context.fill();//绘制填充图形

//半圆不缝合
context.beginPath();//开始另一个图形
context.arc(500,400,50,Math.PI/3,Math.PI,false);
context.closePath();//从当前点回到起始点
context.fill();//绘制填充图形



//直接绘制一个填充扇形，但边界不缝合
context.beginPath();//开始另一个图形
context.fillStyle="green";//设置填充颜色
context.strokeStyle="red";//线段的颜色
context.lineWidth=2;//线宽
context.moveTo(400,600);//设置起点
context.arc(400,600,50,Math.PI*7/6,Math.PI*11/6,false);
context.fill();//绘制填充图形
context.stroke()//开始绘制
context.beginPath();//开始另一个图形
context.fillStyle="gray";//设置填充颜色
context.strokeStyle="red";//线段的颜色
context.lineWidth=2;//线宽
context.moveTo(400,600);//设置起点
context.arc(400,600,25,Math.PI*7/6,Math.PI*11/6,false);
context.fill();//绘制填充图形
context.stroke()//开始绘制

//通过两个半扇形重叠合成一个完整的有边界的扇形
context.beginPath();//开始另一个图形
context.fillStyle="green";//设置填充颜色
context.strokeStyle="red";//线段的颜色
context.lineWidth=2;//线宽
context.moveTo(100,600);//设置起点
context.arc(100,600,50,Math.PI*7/6,Math.PI*1.5,false);
context.fill();//绘制填充图形
context.stroke()//开始绘制
context.beginPath();//开始另一个图形
context.moveTo(100,600);//设置起点
context.arc(100,600,50,Math.PI*11/6,Math.PI*1.5,true);
context.fill();//绘制填充图形
context.stroke()//开始绘制
context.beginPath();//开始另一个图形
context.fillStyle="gray";//设置填充颜色
context.strokeStyle="red";//线段的颜色
context.lineWidth=2;//线宽
context.moveTo(100,600);//设置起点
context.arc(100,600,25,Math.PI*7/6,Math.PI*1.5,false);
context.fill();//绘制填充图形
context.stroke()//开始绘制
context.beginPath();//开始另一个图形
context.moveTo(100,600);//设置起点
context.arc(100,600,25,Math.PI*11/6,Math.PI*1.5,true);
context.fill();//绘制填充图形
context.stroke()//开始绘制

//绘制文字
context.beginPath();//开始另一个图形
context.lineWidth=2;//线宽
context.strokeStyle="red";//线段的颜色
context.fillStyle="green";//设置填充颜色
context.font="40px 隶书";
context.strokeText("HTML5的canvas元素",500,700);//空心
context.fillText("HTML5的canvas元素",500,800);//实心
context.strokeText("HTML5的canvas元素",500,900);//空心实心重合
context.fillText("HTML5的canvas元素",500,900);
//线性渐变色
g=context.createLinearGradient(100,700,200,700);//(颜色渐变的起始坐标和终点坐标)
g.addColorStop(0,"#000000");
g.addColorStop(1,"#ffffff");
context.fillStyle=g;
context.fillRect(100,700,200,200);

//放射性渐变
g1=context.createRadialGradient(825,400,10,825,525,150);//(颜色渐变的起始坐标和终点坐标)
g1.addColorStop(0,"#000000");
g1.addColorStop(1,"#ffffff");
context.fillStyle=g1;
context.fillRect(700,400,250,250);
</script>
</body>
</html>
qq_23666533
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue之canvas拖动元素
12-28
vue之canvas拖动元素 支持选中，置顶，支持以鼠标点前点拖动
HTML5 创建canvas元素示例代码
09-28
当浏览器不支持`canvas`元素时，`canvas`标签内的文本（在这个例子中是“提示：你的浏览器不支持<canvas>标签”）将作为备选内容显示。 为了在`canvas`上进行绘图，我们需要使用JavaScript的`canvas` API。这个API...
Canvas绘画功能（待补充）
weixin_33806300的博客
04-24 76
由于项目的前端需要用户手绘输入，所以我们利用Canvas控件做绘画面板，并且实现了许多功能，包括手绘笔画，清空画板，上传手绘图，下载手绘图，记录用户笔画，上传背景图。以后有时间都写到这篇博客中，今天晚上想写的一个是如何隐藏input控件。代码如下： <div style="position: absolute; overflow: hidden; width: 1px; height:...
CANVAS移动、缩放、旋转画入的图片
热门推荐
羽筠的博客
08-16 1万+
自己做的一个CANVAS移动、缩放、旋转画入的图片demo： CANVAS touch测试 *{ margin:0px; padding:0px; -webkit-tap-highlight-color:rgba(0,0,0,0); box-sizing:border-box;} html{ min-width:320px; max-width:640px; marg
Canvas元素
ddd2501的博客
11-20 1817
Canvas元素的基础知识，好好学，好好看
canvas元素
书香水墨
04-14 1003
标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。 在开发基于Canvas的应用程序时的步骤： (1)使用document.getElementById()方法S来获取指向canvas的引用。 (2)在canvas对象上调用getContext(_2d’)方法，获取绘图环境变量(注意，“2d”中的“d” 必须小写)- (3)使用绘图环境对象在canvas元素上进行绘制。 一个简单的...
HTML5 canvas元素
流萤梦的博客
10-18 1674
之前，我对于canvas元素的使用有些误解，在查询了相关资料以及自己实操了一些例子后简单的分享一下如何使用canvas元素。 1、在页面中添加元素 和之前我们所了解的其他标签元素一样，比如说，我要写一个段落，毫无疑问，我会添加一个p标签。那么我要做一个导航栏，也是直接来一个标签nav，同样的道理，我添加画布元素该怎么做呢？ &lt;!DOCTYPE html&gt; &lt;html la...
canvas 添加html元素,给canvas添加内容
weixin_31951365的博客
06-14 2349
画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度： 通过 JavaScript 来绘制 canvas 元素本身是没有canvas 画布与画布内容都缩小如何实现?如何将canvas复制给另外一个canvascanvas怎么根据坐标获取...
HTML5 canvas元素初识
Wendy
02-09 983
HTML5 canvas元素随其而来的编程接口Canvas API应用前景极为广阔。简单地说，canvas元素能够在网页中创建一块矩形区域，这块矩形区域可以称为画布，这其中可以绘制各种图形。 是HTML5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 。 1、在页面中添加canvas元素        如果要向页面中添加ca
Canvas笔记03：Canvas元素功能、属性、获取、原理等一文讲透
最新发布
贝格前端工场的博客
03-02 1236
hello，我是贝格前端工场，最近在学习canvas，分享一些canvas的一些知识点笔记，本期分享canvas元素的知识，欢迎老铁们一同学习，欢迎关注，如有前端项目可以私信贝格。Canvas元素是HTML5中的一个重要标签，用于在Web页面上绘制图形、动画和其他视觉效果。它提供了一个可编程的2D绘图环境，通过JavaScript代码可以在Canvas上绘制各种形状、图片和文本。
Canvas旋转元素
十二月咖啡馆工作室
10-26 1700
Canvas是HTML5的画布元素，有时需要按指定角度旋转某一个元素。var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d");//x,y为旋转的圆心,theta为角度（弧度，范围0~2π） ctx.translate(x, y); ctx.rotate(theta); ctx.transl
canvas 判断哪个元素被点击_Selenium如何定位到canvas以及如何单击canvas上的元素
weixin_39975529的博客
12-22 4175
最近在做一个自动化的上传项目，碰到了Selenium需要点击canvas上的元素关闭网页蒙层的问题？ 想了好久一直没有解决，在网上搜索和实践，终于找到解决方法。1.定位canvas这个比较简单，有很多方法，比如 find_element_by_id()2.点击canvas中的元素，关闭蒙层这里需要用到 ActionChains 这个类，它是继承selenium.webdriver这个父类，使用方法...
html5中监听canvas内部元素点击事件的三种方法
12-14
在HTML5中，Canvas元素作为一个绘图表面，其内部绘制的图形不具备DOM元素的特性，因此无法直接绑定点击事件。为了实现对Canvas内部图形的交互，开发者需要采取一些技巧来模拟这种行为。本文将探讨三种方法来监听...
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
09-28
这是通过调用canvas元素的`getContext()`方法实现的，通常传入参数"2d"来获取2D渲染上下文。例如： ```javascript var canvas = document.getElementsByTagName("canvas")[0]; var context = canvas.getContext("2d...
38video视频播放
qq_23666533的博客
07-21 950
1video视频播放 不支持 autoplay（autoplay/空）自动播放；loop（loop/空）循环播放; preload（auto/none/metadata）是否自动进行加载-->
12特殊符号的使用
qq_23666533的博客
07-18 597
特殊符号的使用 空格&#160&#160&#160&#160&#160&nbsp&nbsp&nbsp&nbsp&nbsp的使用 小于大于号&lthtml&gt的使用
16table布局和综合实例
qq_23666533的博客
07-15 507
table布局和综合实例
20header和footer
qq_23666533的博客
07-19 447
header和footer body{height:708px;} header{width:100%;height:10%;background:green;} footer{width:100%;height:10%;background:blue;} #div0{width:100%;height:80%;} #div3{width:20%;height:100%;backgr
3左右居中对齐
qq_23666533的博客
07-15 321
例2改进 八阵图 作者：杜甫 功盖三分国，名成八阵图。 江流石不转，遗恨失吞吴。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值