canvas | 易学教程

Canvas---体验Canvas绘图

阅读更多关于 Canvas---体验Canvas绘图

体验Canvas绘图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1px solid #ccc; /*不建议在样式设置尺寸*/ /*width: 600px; height: 400px;*/ } </style> </head> <body>    <canvas width="600" height="400" ></canvas>   <script> /*1.获取元素*/ var myCanvas = document.querySelector('canvas'); /*2.获取上下文绘制工具箱 */ /*是否有3d 暂时没有*/ var ctx = myCanvas.getContext('2d'); /*web gl 绘制3d效果的网页技术*/ /*3.移动画笔*/ ctx.moveTo(100,100); /*4.绘制直线 (轨迹，绘制路径)*/ ctx

canvas绘制圆环

阅读更多关于 canvas绘制圆环

<canvas class="process" width="48px" height="48px">15%</canvas> <script type="text/javascript"> drawProcess() function drawProcess() { $('canvas.process').each(function() { var text = $.trim($(this).text()); var process = text.substring(0, text.length - 1); var canvas = this; var context = canvas.getContext('2d'); context.clearRect(0, 0, 48, 48); context.beginPath(); context.moveTo(24, 24); context.arc(24, 24, 24, 0, Math.PI * 2, false); context.closePath(); context.fillStyle = '#ddd'; context.fill(); context.beginPath(); context.moveTo(24, 24); context.arc(24, 24, 24, 0, Math.PI * 2 * process

canvas绘制圆环进度条

阅读更多关于 canvas绘制圆环进度条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绘制圆环进度条</title> </head> <body> <div> <canvas id="myCanvas"></canvas> </div> <script type="text/javascript"> function drawRing(w,h,val){ //先创建一个canvas画布对象，设置宽高 var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); ctx.canvas.width=w; ctx.canvas.height=h; //圆环有两部分组成，底部灰色完整的环，根据百分比变化的环 //先绘制底部完整的环 //起始一条路径 ctx.beginPath(); //设置当前线条的宽度 ctx.lineWidth=10;//10px //设置笔触的颜色 ctx.strokeStyle='#CCCCCC'; //arc()方法创建弧/曲线（用于创建圆或部分圆）arc(圆心x,圆心y,半径,开始角度,结束角度) ctx.arc(50,50,40,0,2*Math.PI); //绘制已定义的路径 ctx.stroke(); //绘制根据百分比变动的环 ctx

canvas 绘制动态圆环进度条

阅读更多关于 canvas 绘制动态圆环进度条

由于使用的是vue开发，所以就展示一下绘制函数好了，上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) { /* @drawing_elem: 绘制对象 @percent：绘制圆环百分比, 范围[0, 100] @forecolor: 绘制圆环的前景色，颜色代码 @bgcolor: 绘制圆环的背景色，颜色代码 */ var context = drawing_elem.getContext("2d"); var center_x = drawing_elem.width / 2; var center_y = drawing_elem.height / 2; var rad = Math.PI*2/100; var speed = 0; // 绘制背景圆圈 function backgroundCircle(){ context.save(); context.beginPath(); context.lineWidth = 8; //设置线宽 var radius = center_x - context.lineWidth; context.lineCap = "round"; context.strokeStyle = bgcolor; context.arc(center_x, center_y,

html5 Canvas颜色渐变（画图很重要）

阅读更多关于 html5 Canvas颜色渐变（画图很重要）

如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。 fillStyle = color strokeStyle = color strokeStyle 是用于设置图形轮廓的颜色，而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000)。下面的例子都表示同一种颜色。 // 这些 fillStyle 的值均为 '橙色' ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)"; 注意: 目前 Gecko 引擎并没有提供对所有的 CSS 3 颜色值的支持。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。 Canvas填充样式fillStyle 说明在本示例里

【Unity】GUI（二）

阅读更多关于【Unity】GUI（二）

上一章介绍了GUI的基础概念：什么是GUI、GUI的两种模式（immediate mode, retained mode）。本章详细介绍如何使用基于retained mode 的GUI编辑系统。 1. 创建Canvas Canvas是一切GUI元件的基础，所有的GUI都必须附在Canvas上（Unity官方原文是 All UI elements must be children of a GameObject that has a Canvas component attached. ）。 Canvas有三种渲染模式 Screen Space - Overlay 所有的UI元件都渲染在屏幕视野的最顶层（没有相机时，Canvas上的UI也能照常渲染）。无论相机对准何处、摄影角度如何、与Canvas的距离有多远，UI的大小样貌会一直保持不变（因为与相机不相关， without reference with camera ），屏幕大小、分辨率改变了，UI也会跟着自动调整适应（ automaitcally rescale to fit ）。特点：（1）UI大小不会受相机的影响，屏幕大小、分辨率改变时UI能自动缩放以适应。（2）UI不会被游戏内物体遮挡 Sreen Space - Camera UI元件大小不会因相机远近、拍摄位置、角度而改变

Canvas绘制渐变

阅读更多关于 Canvas绘制渐变

1.绘制线性渐变 Canvas提供了用于创建线性渐变的函数createLinearGradient（x0,y0,x1,y1）,坐标点（x0,y0）是起点，（x1,y1）是终点创建一个渐变色 var gradient=createLinearGradient(0,0,300,0); 定义渐变色颜色 ctx.addColorStop(stop,color); ctx.addColorStop(0,"#f00"); ctx.addColorStop(1,"#00f"); 设置Canvas内容的fillStyle为当前的渐变对象，并且绘制这个图形 1 ctx.fillStyle=gradient; //设置fillStyle为当前的渐变对象 2 ctx.fillRect(0,0,400,300); //绘制渐变图形一个线性渐变的图形 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="myCanvas"></canvas> 9 10 <script type="text/javascript"> 11 var canvas=document.getElementById("myCanvas");

canvas与svg的区别

阅读更多关于 canvas与svg的区别

　　　　1、svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；　　　　2、svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿 https://www.cnblogs.com/yanghuiting/p/10902001.html 来源： https://www.cnblogs.com/taochengyong/p/12290057.html

初探canvas

阅读更多关于初探canvas

canvas是html5新增的一个专用于图形处理的标签，利用canvas可以实现大部分图形操作 canvas的一些基本操作与其他图形编程工具类似，包含：各种形状的边框、路径绘制和填充，画布属性调整，样式调整等：一、canvas环境构建进入html编辑环境即可。在body中添加canvas标签 [html] <body> <canvas id="canvas1" width="400px" height="200px"></canvas><br /> </body> 这样就完成了一个canvas的铺设,但这样是远远不够的，在运用canvas之前还必须做一些工作，包括变量关联和上下文的创建 [html] $(document).ready( function(){ var canvas=$("#canvas1"); //变量关联 var context=canvas.get(0).getContext("2d"); //创建上下文 context.clearRect(0,0,400,200); //画矩形 <span style="white-space:pre"> </span>} ); 二、画图的方法有多种，几种典型方法如下 [html] context.fillRect(20,20,100,100); //填充 context.strokeRect(130,20,100

Canvas绘图API

阅读更多关于 Canvas绘图API

　　Canvas就是一个画布，可以进行任何的线、图形、填充等一系列的操作。　　Canvas的Context对象　要使用Canvas来绘制图形必须在页面中添加Canvas的标签　<canvas id="canvasDemo" width="400" height="400"> 　　<p>请使用支持html5的浏览器查看实例</p> 　</canvas> 　id是必须的，js要用id来那当前的Canvas的Dom对象。通过次Cancas的Dom对象就可以获取它的上下文(Context)。　<script type="text/javascript"> 　　var canvasDom = document.getElementById("canvaDemo"); 　　var context = canvasDom.getContext('2d'); 　</script> 　Context上下文默认两种绘制方式：绘制线(stroke)或填充(fill)。　　Canvas绘制步骤：创建HTML页面，设置画布标签。编写js，获取画布dom对象。通过canvas标签的dom对象获取上下文。设置绘制样式、颜色。绘制矩形或填充矩形。　<body> 　　<canvas id="canvasDemo" width="500" height="500"> 　　　　<p

订阅 canvas