canvas的简单绘制及设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
#MyCanvas {
border: 1px solid #f60;
}
</style>
<body>
<!--创建一个canvas标签并设置大小-->
<canvas id="MyCanvas" height="600" width="500"></canvas>
</body>
<script type="text/javascript">
//创建图像
var img = new Image();
img.src = 'img/0.png'; window.onload = function() {
var MyCanvas = document.getElementById('MyCanvas');
//getContext() 方法返回一个用于在画布上绘图的环境,2d为二维绘图
var ctx = MyCanvas.getContext('2d'); //开始绘制
ctx.beginPath();
//设置填充图像,定位点X Y,宽高
ctx.rect(50, 50, 100, 100);
//设置样式
ctx.fillStyle = "red";
ctx.fill(); //图像阴影:1.阴影颜色2.X Y 为阴影方向3.模糊程度
ctx.shadowColor = "#FF6600";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5; //设置边框
ctx.strokeStyle = 'lightblue';
ctx.stroke(); //开始一条路径,或重置当前路径
ctx.beginPath(); //图像位置移动
ctx.moveTo(500, 150); //绘制路径
ctx.lineTo(300, 100);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.fillStyle = 'lightcoral';
ctx.fill(); ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(300, 100);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.fillStyle = 'lightcoral';
ctx.fill(); ctx.beginPath();
ctx.moveTo(400, 50);
ctx.lineTo(300, 100);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.fillStyle = 'lightgreen';
ctx.fill(); ctx.beginPath();
ctx.moveTo(100, 250);
ctx.lineTo(50, 300);
ctx.lineTo(150, 300);
//克隆一条边框
ctx.closePath(); //边框大小
ctx.lineWidth = 10;
ctx.stroke();
ctx.strokeStyle = 'lightskyblue'; ctx.beginPath(); //中心点X Y,半径r,起始弧度,结束弧度,true/false为半圆方向
//去掉'2*'为半圆
ctx.arc(250, 250, 50, 0, 2 * Math.PI);
ctx.fill();; //放置文字
ctx.beginPath();
ctx.font = '30px 微软雅黑';
ctx.fillText("Hello Canvsas", 50, 350); //文字描边
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeText("Hello Canvsas", 50, 350); //放置图片
ctx.beginPath();
ctx.drawImage(img, 50, 400, 150, 150);
}
</script>
</html>
canvas的简单绘制及设置的更多相关文章
- Canvas 旋转风车绘制
写在前面: 亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解,如果本文对你有一丁点帮助,还请劳驾您给我点个赞,您的认可将是我坚持下去的强大动力!谢谢! 在进行教学之前 ...
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- canvas教程(二) 绘制直线
经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...
- Android中使用Canvas和Paint绘制一个安卓机器人
场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...
- iOS开发UI篇—iOS开发中三种简单的动画设置
iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...
- Html5 Canvas一个简单的画笔例子
相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...
- -_-#【Canvas】导出在<canvas>元素上绘制的图像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 简单的Slony-I设置实例 II
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL集群方案相关索引页 回到顶级页面:PostgreSQL索引页 接前面例子, 简单的Slony-I设置实例 这次我 ...
- Canvas 中drawImage 绘制不出图片
在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...
随机推荐
- CentOS7 安装图形化桌面
1.装好CentOS7后,我们一开始是上不了网的 (ping 百度报错:Name or service not know) 2.输入dhclient,可以自动获取一个IP地址,再用命令ip addr查 ...
- mysql事务级别和spring中应用
一.事务的基本要素(ACID) 1.原子性(Atomicity):事务开始后所有操作,要么全部做完,要么全部不做,不可能停滞在中间环节.事务执行过程中出错,会回滚到事务开始前的状态,所有的操作就像没有 ...
- linux网络配置及虚拟机连接不上网排错思路
第1章 操作系统与虚拟软件的使用 1.1 虚拟软件使用方法 Vmware 1.1.1 开启vmware 注: 同时只能开启一个VMware软件,如果开了两个VMware窗口 提示 ...
- 力扣Leetcode 11. 盛最多水的容器
盛最多水的容器 给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找 ...
- 【Android】SwipeRefreshLayout的简单使用教程。下拉刷新控件炫酷效果。
作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...
- P3419 [POI2005]SAM-Toy Cars
Description Jasio 是一个三岁的小男孩,他最喜欢玩玩具了,他有n 个不同的玩具,它们都被放在了很高的架子上所以Jasio 拿不到它们. 为了让他的房间有足够的空间,在任何时刻地板上 ...
- Linux:用户账号、密码、群组、群组密码文件查看
使用者账号密码存放文件:/etc/passwd, /etc/shadow 虽然我们登入 Linux 主机的时候,输入的是我们的账号,但是,其实 Linux 主机并不会直接认识你的『账 号名称』的,他仅 ...
- 剑指 Offer 54. 二叉搜索树的第k大节点
题目描述 给定一棵二叉搜索树,请找出其中第k大的节点. 示例1: 输入: root = [3,1,4,null,2], k = 1 3 / \ 1 4 \ 2 输出: 4 示例2: 输入: root ...
- Zabbix Agent报“listener failed: zbx_tcp_listen() fatal error: unable to serve on any address”
一台服务器的Zabbix Agent升级后,在Zabbix Server发现Zabbix Agent无法访问.检查Zabbix Agent发现服务停止了,启动Zabbix Agent后,发现服务马上又 ...
- KMP记录
例题:luogu P3375 [模板]KMP字符串匹配 知识点:1.KMP模板,熟悉KMP 2.理解KMP过程:失配时,是从后缀转向前缀.即失配时,匹配串是从尾转到头继续匹配,被匹配串不改变. 3.注 ...