【HTML5】Canvas画布

什么是 Canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

* 添加 canvas 元素。规定元素的 id、宽度和高度:

<canvas id="myCanvas" width="200" height="100"></canvas>

* canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<script type="text/javascript">
//使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
//创建 context 对象:是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var cxt=c.getContext("2d");
//下面的两行代码绘制一个红色的矩形:fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);//意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
</script>

 

** 画线条

效果图:

<!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.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();</script></body>
</html>

** 画圆

<!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>

** 画渐变图形

<!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>

** 把一幅图像放置到画布上

<!DOCTYPE HTML>
<html>
<body><canvas id="myCanvas" width="230" height="180" 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>

 

转载于:https://www.cnblogs.com/anni-qianqian/p/5585408.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470501.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SynthText流程解读 - 不看代码不知道的那些事

文章目录1 概述2 流程解读2.1 生成文字mask2.2 plane2xyz的bug2.3 文字上色2.4 图像融合参考资料1 概述 SynthText是OCR领域生成数据集非常经典&#xff0c;且至今看来无人超越的方法。整体可以分为三个大的步骤&#xff0c;分别是生成文字的mask&#xff0c;这里用到了图像的…

python if name main 的作用_Python中if __name__ == '__main__':的作用和原理

if __name__ __main__:的作用 一个python文件通常有两种使用方法&#xff0c;第一是作为脚本直接执行&#xff0c;第二是 import 到其他的 python 脚本中被调用&#xff08;模块重用&#xff09;执行。因此 if __name__ main: 的作用就是控制这两种情况执行代码的过程&#x…

1+X web中级 Laravel学习笔记——Eloquent ORM查询、更新、删除、新增

Eloquent ORM简介 larave1所自带的Eloquent oRM是一个非常优美简洁的ActiveRecord实现&#xff0c;用来实现数据库的操作他的每个数据的表都有对应的模型&#xff08;model&#xff09;用于数据表的交互模型的建立 一、Eloquent ORM的查询 二、Eloquent ORM新增 通过模型新增…

使用复合设计模式扩展持久化的CURD,Select能力

大家可能会经常遇到接口需要经常增加新的方法和实现&#xff0c;可是我们原则上是不建议平凡的增加修改删除接口方法&#xff0c;熟不知这样使用接口是不是正确的接口用法&#xff0c;比如我见到很多的项目分层都是IDAL&#xff0c;DAL&#xff0c;IBLL&#xff0c;BLL&#xf…

python脚本加密_教你如何基于python实现脚本加密

这篇文章主要介绍了如何基于python实现 脚本加密,文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 from pathlib import Path import python_minifier import compileall import sys def get_save_path(from_dir,…

1+X web中级 Laravel学习笔记——blade模版

一、blade模版简介 Blade是larave1提供的一个既简单又强大的模版引擎和其他的流行的php模版引擎不一样&#xff0c;blade并不限制你在视图&#xff08;view&#xff09;中使用原生php代码 二、 模版继承 section yield extents parent 三、基本语法以及include的使用 1…

matplotlib 散点图_matplotlib画图 绘制散点图案例

假设通过爬虫你获取到了北京2016年3,10月份 每天白天的最高气温(分别位于列表a,b), 那么此时如何寻找出气温和随时间(天)变化的某种规律? a [11,17,16,11,12,11,12,6,6,7,8,9,12,15,14,17,18,21,16,17,20,14,15,15,15,19,21,22,22,22,23] b [26,26,28,19,21,17,16,19,18,20,…

深度学习基础-1

文章目录0 前言1 图像分类简介1.1 什么是图像分类1.2 图像分类任务的难点1.3 分类任务的评价指标1.3.1 Accuracy1.3.2 Precision和Recall1.3.3 F1 Score1.4 分类图像模型总体框架2 线性分类器2.1 图像的表示方法2.2 Cifar10数据集介绍2.3 分类算法输入2.4 线性分类器3 损失函数…

一、PHP基础——表单传值、上传文件

表单传值 概念: 表单传值即浏览器通过表单元素将用户的选择或者输入的数据提交给后台服务器语言。 为什么使用表单传值? 动态网站&#xff08;Web2.0&#xff09;的特点就是后台根据用户的需求定制数据&#xff0c;所谓的“需求”就是用户通过当前的选择或者输入的数据信息&a…

python dataframe 列_python pandas库中DataFrame对行和列的操作实例讲解

用pandas中的DataFrame时选取行或列&#xff1a; import numpy as np import pandas as pd from pandas import Sereis, DataFrame ser Series(np.arange(3.)) data DataFrame(np.arange(16).reshape(4,4),indexlist(abcd),columnslist(wxyz)) data[w] #选择表格中的w列&…

利用微信搜索抓取公众号文章(转载)

来源&#xff1a;http://www.shareditor.com/blogshow/44 自动收集我关注的微信公众号文章 2016.7.14 更新 搜狐微信增加对referer验证 var page require(webpage).create();page.customHeaders{"referer":"http://weixin.sogou.com/weixin?oq&query关键词…

二、PHP基础——连接msql数据库进行增删改查操作 实战:新闻管理项目

Mysql扩展 PHP针对MySQL数据库操作提供的扩展&#xff1a;允许PHP当做MySQL的一个客户端连接服务器进行操作。 连库基本操作 连接数据库服务器 1&#xff09;资源 mysql_connect(服务器地址&#xff0c;用户名&#xff0c;密码) 连接资源默认也是超全局的&#xff0c;任何地方都…

深度学习基础-2

文章目录0 前言1 全连接神经网络2 激活函数2.1 Sigmoid2.2 Tanh2.3 ReLU2.4 Leaky ReLU3 交叉熵损失4 计算图与反向传播4.1 计算图4.2 梯度消失与梯度爆炸4.3 动量法5 权重初始化5.1 全零初始化5.2 标准随机初始化5.3 Xavier初始化5.4 Kaming初始化6 批归一化7 参考资料0 前言 …

三、PHP基础——HTTP协议 文件编程

一、HTTP协议初步认识 HTTP协议概念 HTTP协议&#xff0c;即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和万维网(WWW World Wide Web)服务器之间互相通信的规则&#xff0c;通过因特网传送万维网文档的数据传送协议。 HTTP协议是用于从WWW服务器传…

python中的threading_python中的threading模块使用说明

这段时间使用python做串口的底层库&#xff0c;用到了多线程&#xff0c;对这部分做一下总结。实际用完了后再回过头去看python的官方帮助文档&#xff0c;感觉受益匪浅&#xff0c;把里面的自己觉得有用的一些关键点翻译出来&#xff0c;留待后续查验。 threading是thread的高…

系统防止绕过程序直接数据库修改数据(金额等敏感数据)

对数据库中的每一行敏感数据设有独有的数字签名&#xff0c;每一次修改数据库我们都在底层进行签名校验进行比较。 未经授权的数据库修改无法通过校验&#xff0c;程序进行终止操作并提示异常。 如&#xff1a; keyStr1amountaccountkey 可对keyStr1进行hash加密&#xff08;si…

软件工程阅读笔记3

第七章主要是测试与改错。测试的目的是为了发现尽可能多的缺陷。测试并不仅是个技术问题&#xff0c;更是个职业道德问题。在软件测试时如果发现了错误&#xff0c;必须请程序员改错&#xff0c;否则测试工作就白干了。改错是个大悲大喜的过程&#xff0c;一天之内可以让人在悲…

四、PHP基础——会话技术Cookie 和 Session

会话技术初步认识 会话技术介绍 web会话可简单理解为&#xff1a;用户开一个浏览器&#xff0c;访问某一个web站点&#xff0c;在这个站点点击多个超链接&#xff0c;访问服务器多个web资源&#xff0c;然后关闭浏览器&#xff0c;整个过程称之为一个会话。 HTTP协议的特点是…

python三级菜单设计题目_Python三级菜单

广告关闭 腾讯云11.11云上盛惠 &#xff0c;精选热门产品助力上云&#xff0c;云服务器首年88元起&#xff0c;买的越多返的越多&#xff0c;最高返5000元&#xff01; 三级菜单:打印省、市、县三级菜单。 可返回上一级&#xff0c;可随时退出程序首先准备基础数据zone{山东:{青…

c#复习-2

输入三个学生的信息学号、姓名、分数从大到小排序 1 using System;2 using System.Collections;3 using System.Collections.Generic;4 using System.Linq;5 using System.Text;6 7 namespace 复习CS8 {9 class Program 10 { 11 struct Student 12 { 1…