画布canvas的使用2

最新推荐文章于 2020-05-08 13:08:27 发布
最新推荐文章于 2020-05-08 13:08:27 发布
阅读量464 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jihn_kevin/article/details/105915094
版权

画布Canvas--2

示例3：创建画布并画圆

代码

<!DOCTYPE HTML>
<html>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your Browser Does Not Support the Canvas Element.
    </canvas>

    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.fillStyle="#FF0000";
        cxt.beginPath();
        cxt.arc(70,18,15,0,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
    </script>
</body>
</html>

实现效果

1.创建一个矩形画布
2.在画布中画一个圆
在这里插入图片描述

结构分析

涉及对象
矩形画布
画一个圆
涉及函数
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
逻辑步骤
1.生成一个画布canvas对象: canvas
2.画布自带可以被画的属性: cxt
3.创建画布对象后自动执行script内容 : script

代码块分析

1.生成画布对象：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your Browser Does Not Support the Canvas Element.
</canvas>

id,方便之后函数对对象进行操作或者读取对应的信息

2.使用script画一个圆

<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	cxt.fillStyle="#FF0000";
	cxt.beginPath();
	cxt.arc(70,18,15,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
</script>

生成画布对象后，会自动执行script中的内容，前两个语句是获取操作的目标，后五句开始对目标进行操作：画一个圆后，再对圆内进行颜色填充。

示例4：创建画布并给它部分填色

代码

<!DOCTYPE HTML>
<html>
<body>
    <canvas Id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your Browser Does Not Support the Canvas Element.
    </canvas>

    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        var grd=cxt.createLinearGradient(0,0,175,50);
        grd.addColorStop(0,"#FF0000");
        grd.addColorStop(1,"#00FF00");
        cxt.fillStyle=grd;
        cxt.fillRect(0,0,175,50);
    </script>
</body>
</html>

实现效果

在这里插入图片描述

结构分析

涉及对象
画布
涉及函数
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
逻辑步骤
1.生成一个画布canvas对象: canvas
2.画布自带可以被填充颜色的属性 : fill
3.创建画布对象后自动执行script内容 : script

代码块分析

1.创建canvas

<canvas Id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your Browser Does Not Support the Canvas Element.
</canvas>

只需要给出id，定义形状。

2.使用script填充颜色

<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	var grd=cxt.createLinearGradient(0,0,175,50);
	grd.addColorStop(0,"#FF0000");
	grd.addColorStop(1,"#00FF00");
	cxt.fillStyle=grd;
	cxt.fillRect(0,0,175,50);
</script>

前两个语句主要是获取操作的对象，以及定义之后用script中的哪些函数对这个对象进行操作。
var grd=cxt.createLinearGradient(0,0,175,50); 和 cxt.fillRect(0,0,175,50); 共同决定了填充的结果，前部分决定渐变的范围，后部分决定填充的范围，如果范围1小于范围2，那么渐变色填充只会发生在范围1中，其余部分变成单一颜色填充。
grd开头的语句主要决定渐变色的颜色，cxt开头的语句定义了填充颜色的操作。

示例5：创建画布并设置背景图像

代码

<!DOCTYPE HTML>
<html>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your Browser Does Not Support the Canvas Element.
    </canvas>

    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        var img=new Image() 
        img.src="/i/eg_flower.png"
        cxt.drawImage(img,0,0);
    </script>
</body>
</html>

实现效果

1.创建一个矩形画布
2.更改背景
在这里插入图片描述

结构分析

涉及对象
矩形画布
背景图片
涉及函数
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
逻辑步骤
1.生成一个画布canvas对象: canvas
2.画布自带可以被画的属性: cxt
3.创建画布对象后自动执行script内容 : script

代码块分析

1.生成画布对象：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your Browser Does Not Support the Canvas Element.
</canvas>

id,方便之后函数对对象进行操作或者读取对应的信息

2.使用script插入一个背景图片

<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	var img=new Image() 
	img.src="/i/eg_flower.png"
	cxt.drawImage(img,0,0);
</script>

生成画布对象后，会自动执行script中的内容，前两个语句是获取操作的目标，后五句开始对目标进行操作：定义一个img变量，注意使用时涉及img变量的语句是否要加分号（判断的标准是?）。最后再使用一个drawImage函数定义图像的位置。

总结

至此，canvas告一段落。以后分析都采用代码 、实现效果 、结构分析 、代码块分析的模式。

jihn_kevin
关注
java画布canvas_使用Canvas在Java中绘图
weixin_35411480的博客
02-21 3760
以下应该有效：public static void main(String[] args){final String title = "Test Window";final int width = 1200;final int height = width / 16 * 9;//Creating the frame.JFrame frame = new JFrame(title);frame.se...
Simple2Canvas:通过画布生成带有JSON数据的图像
05-27
Simple2Canvas 通过canvas 使用JSON数据生成图像 安装 您可以使用npm或[removed]安装它： npm install simple2canvas --save-dev < script src =" ...
关于canvas画布
AADGAI的博客
05-08 194
关于canvas画布的那些事 canvas的创建 在HTML5中提供canvas标签， <canvas id ="" width="" height="">您的浏览器不支持</canvas> 定义id属性是为了在js中引用元素。标签中间的文字在浏览器不支持的情况下才会显示。标签和标签一样，有两个原生属性宽与高，默认为300px*150px，没有单位的值将忽略不计。注意，不...
canvas学习总结三：绘制路径-线段
diannai2478的博客
06-18 364
Canvas绘图环境中有些属于立即绘制图形方法，有些绘图方法是基于路径的。 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText()方法也是立即绘制的，但是文本不算是图形。 基于路径的绘制系统 大多数绘制系统，如：SVG(Scalable Verctor Graphics, 可缩放的矢量图形)，Adobe Illus...
html5学习之canvas模块的简单使用，作画三角形、圆形、矩形等
Ibelievesunshine的博客
07-02 846
画一个三角形&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;画一个三角形&lt;/title&gt; &lt;script type="text/javascript"&gt;
HTML5基础
kun_moon的博客
09-03 221
新特性 HTML5 中的一些有趣的新特性： • 用于绘画的canvas 元素 • 用于媒介回放的video 和audio 元素 • 对本地离线存储的更好的支持 • 新的特殊内容元素，比如article、footer、header、nav、section • 新的表单控件，比如calendar、date、time、email、url、search 浏览器支持 最新版本的Safari、Chrome、F...
canvas基础教程
CaseyWei
07-27 362
01.canvas简单的认识 canvas 是html5提供给我们的一个绘图标签 默认大小 300X150 背景透明 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas简单的认识&lt;/titl
Android 自定义画布canvas 实现绘制和清空画布功能
10-21
在Android开发中，自定义画布Canvas是实现图形绘制的核心工具。Canvas提供了丰富的API，允许开发者在屏幕上绘制各种形状、图像以及文字等。本教程将深入探讨如何利用Canvas实现绘制和清空画布的功能。 首先，我们...
HTML5 画布canvas使用方法
12-30
canvas 元素使用 JavaScript 在网页上绘制图像，本身是没有绘图能力。 canvas 是一个矩形区域，可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 下面来做几个示例： 1、填充...
Android 画布Canvas之连线动画Demo
12-11
在这个"Android画布Canvas之连线动画Demo"中，我们将深入探讨如何利用Canvas实现动态的连线动画效果，包括控制动画速度、线条颜色和线宽。 首先，我们要理解Canvas的基本绘图操作。`Canvas`提供了如`drawLine()`、`...
html5学习笔记1
code旅行者的专栏
01-07 1694
Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(0,50); cxt.lineTo(70,80);
html5 颜色渐变
anchenyanyue的专栏
10-21 5962
Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"
【HTML5】H5新标签大实例
weixin_34344403的博客
03-24 368
以下是测试Html5新标签性能的大实例: 首先是效果: 代码： <html> <head> <title>Test</title> </head> <body> <h2>header标签定义文档的页眉（介绍信息）</h2> &l...
html5,cxt.arc(100,100,30,0,Math.PI*2,true);
左岸卿风
08-24 5088
cxt.arc(100,100,30,0,Math.PI*2,true); 括号内第一个和第二个参数,代表圆心坐标.第三个参数是圆的半径.第四个参数代表圆周起始位置.0 PI就是起始位置.沿顺时针路线,分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）,为画饼图提供了扇形范围的依据.第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆.第六个参数是一个布尔值,true是顺
HTML5学习(2) canvas标签的使用四
wcf_szkingdom的专栏
08-17 1013
var obj = document.getElementById("myCanvas"); var cxt = obj.getContext("2d"); cxt.fillStyle = "#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,M
Html5 Canvas画图
bdemq的专栏
11-19 690
function init () { var c = document.getElementById("myCanvas"); cxt = c.getContext("2d"); //drawRect(); //drawLine(); //drawArc(); drawGradient(); } //画矩形 functi
小强的HTML5移动开发之路（6）——Canvas图形绘制基础
bulebirds的专栏
04-15 705
在前面提到Canvas是HTML5中一个重要特点，canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现，下面我们用canvas实现基本图形的绘制。 一、Canvas标签的使用 >   html>       head>           meta charset="utf-8">       head>       body
继WPF中另一种渐变色的写法
梦幻小龙虾
05-26 442
继WPF中另一种渐变色的写法 开发工具与关键技术：Visual Studio + HTML 撰写时间：2019年5月25日 canvas 元素用于在网页上绘制图形。 1、什么是 Canvas呢？ （1）HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 （2）canvas画布是一个矩形区域，您可以控制其每一像素。 （3）canvas 拥有多种绘制路径、矩形、圆形、...
Canvas2D入门示例：HTML5画布基本操作
在 "Canvas2DSampleAsimplesample" 示例中，我们看到一个简单的HTML结构和JavaScript代码来创建一个基本的2D画布。首先，通过`document.getElementById`获取ID为 "c" 的 `<canvas>` 元素，然后通过 `getContext("2d...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值