canvas基本绘制图形
canvas H5新增的元素,提供了强大的图形的绘制,变换,图片,视频的处理等等。需要使用JavaScript脚本操作
浏览器支持
大多数的现代浏览器都可以支持;IE8以下的浏览器不支持
画布 可支持设置宽高,默认宽高300 150
获取canvas元素
var mycanvas = document.getElementById("myCanvas");
获取绘制环境(相当于画笔)
var context = mycanvas.getContext("2d");
是自带的好h5对象,拥有多种绘制路径,矩形,圆形,文本等方法
绘制线
开始绘制
context.beginPath();
设置起点的坐标
moveTo(x,y)
设置样式(颜色,渐变或模式)
context.strokeStyle = "yellow";
设置填充颜色
context.fillStyle = "blue";
context.fill();
设置线条宽度
context.lineWidth = 5;
设置线条结束端 lineGap
设置拐角类型 lineJoin
context.lineCap = "round";
绘制
context.stroke();
绘制矩形
fillRect() 绘制填充的矩形
strokeRect() 绘制无填充的矩形
阴影颜色 shadowColor
阴影的模糊级别 shadowBlur
阴影的水平偏移量 shadowOffsetX
阴影的垂直偏移量 shadowOffsetY
绘制文字
strokeText() 绘制空心文本
fillText() 绘制实心文本
线性渐变
createLinearGradient(x0,y0,x1,y1)
x0,y0,x1,y1起始位置的坐标和结束位置的坐标
var linear = context.createLinearGradient(100, 350, 400, 450);
addColorStop()
参数1:对应颜色的位置,[0,1]
参数2:对应的颜色(字符串形式)
linear.addColorStop(0, "red");
linear.addColorStop(0.5, "yellow");
linear.addColorStop(1, "blue");
context.fillStyle = linear;
context.fillRect(0, 350, 500, 25);
context.fillRect(0, 0, 500, 500);
径向渐变
context.createRadialGradient(x0,y0,r0,x1,y1,r1)
x0,y0,r0,x1,y1,r1径向渐变的起始位置和结束位置对应的坐标和渐变半径
var grad = context.createRadialGradient(150, 150, 50, 150, 150, 150);
grad.addColorStop(0, "red");
grad.addColorStop(0.5, "yellow");
grad.addColorStop(1, "blue");
context.fillStyle = grad;
context.fillRect(0, 0, 300, 300);
图形变换
平移 旋转 缩放
translate() 平移 重置画布
平移操作只会影响后面图形的位置,是不会影响前面图形的
context.fillStyle = grad;
context.fillRect(300, 300, 100, 100);
context.translate(50, 50);
rotate()旋转
context.rotate(Math.PI / 4);
scale(w,h) 设置x方向和y方向的缩放比。大于1:放大,小于1:缩小
context.scale();
贝塞尔曲线
二次方贝塞尔曲线
context.quadraticCurveTo(cx,cy,x1,y1);
参数:cx,cy 二次方贝塞尔曲线的控制点坐标位置
x1,y1 结束点坐标位置
context.beginPath();
context.moveTo(50, 50);
context.quadraticCurveTo(100, 100, 150, 20);
context.stroke();
三次方贝塞尔曲线
bezierCurveTo(cx1,cy1,cx2,cy2,x,y)
前四个参数:代表两个控制点的坐标位置
后两个参数:代表结束点的坐标位置
canvas基本绘制图形的更多相关文章
- HTML5使用Canvas来绘制图形
一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...
- 浅谈JavaScript的Canvas(绘制图形)
HTML5中新增加的一个元素canvas,要使用canvas元素,浏览器必须支持html5.通过canvas标签来创建元素,并需要为canvas指定宽度和高度,也就是绘图区域的大小. <canv ...
- 基于canvas线条绘制图形
原理说明 绘制一个正方形,正放心每条边等比例均分,具体分配多少根据自身情况而定,按照最上边边顺时针方向依次绘制线条,相邻两条边上的点依次连接,知道所有的点全部连接完便绘制完成. 示例效果图图如下 具体 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- html5 canvas 笔记一(基本用法与绘制图形)
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
- HTML5—canvas绘制图形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- 【canvas学习笔记二】绘制图形
上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...
- canvas 绘制图形
canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
- canvas高效绘制10万图形,你必须知道的高效绘制技巧
最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈.需求看起来不难,上手就可以做,写两个for循环. 原始绘制方法 首先定义了很多Circle对象,在遍历循环中调用该对象的draw方法.代码 ...
随机推荐
- 在laravel中使用支付宝手机网站支付 和 支付宝退款
1.在蚂蚁金服开放平台中申请对应的应用,并根据提示进行签约 2.给对应的应用信息 生成私钥和公钥(私钥会保存在本地,公钥会放在对应的应用信息中) 3.下载手机网站支付 对应的php sdk 4.将sd ...
- 详细的nginx.conf中文资料整理
整理来源: https://blog.csdn.net/tjcyjd/article/details/50695922 整理结果 Nginx的配置文件nginx.conf配置详解如下: #Nginx用 ...
- FPGA与嵌入式一点见解
FPGA:即现场可编程门阵列,它是在PAL.GAL.CPLD等可编程器件的基础上进一步发展的产物.它是作为专用集成电路(ASIC)领域中的一种半定制电路而出现的,既解决了定制电路的不足,又克服了原有可 ...
- 庖丁解牛-----Live555源码彻底解密(根据MediaServer讲解Rtsp的建立过程)
live555MediaServer.cpp服务端源码讲解 int main(int argc, char** argv) { // Begin by setting up our usage env ...
- java动态画圈圈。运用多线程,绘图
总结:只是意外的收获吧.之前一篇是老师教的,一个点,从底层开始升起,到鼠标按下的地方开始画圈圈, 现在改变了一下,因为点上升的一个循环和画圈的循环是分开的 现在让点点自己跑,并且边跑边画圈.而且在fo ...
- 第11章 Tomcat的系统架构与设计模式
11.1 Tomcat总体设计 11.1.1 Tomcat总体架构 Tomcat和核心有连个组件:Connector和Container,Connector是可以被替换的.一个container可以有 ...
- 第九章 整合Mybatis(待续)
··········
- Angular4中利用promise异步加载gojs
GoJS是一个实现交互类图表(比如流程图,树图,关系图,力导图等等)的JS库 gojs提供了angular的基本例子,不过是离线版 https://github.com/NorthwoodsSoftw ...
- 「小程序JAVA实战」运行微信官方demo(四)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-04/ 微信官方小程序的demo 介绍 https://mp.weixin.qq.com/cgi-b ...
- Ant 执行 exec cmd.exe 时路径包含空格的问题
需求描述 通过Ant脚本调用bat脚本 问题描述 bat脚本所在目录名称包含空格(space),cmd.exe调用时候报错The system cannot find the path specifi ...