canvas | 易学教程

canvas时钟

阅读更多关于 canvas时钟

canvas时钟时钟参数 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title </ title > < style > .clock { width : 400px ; margin : 100px auto; background : #ddd ; border-radius : 20px ; } </ style > </ head > < body > < div class = "clock" > < canvas id = "view" height = "400px" width = "400px" > </ canvas > </ div > < script > var canvas = document .getElementById( 'view' ); //1.获取元素 var c = canvas.getContext( '2d' ); //2.获取上下文对象 //3.定义基础变量 var w = h = 400 ; //时钟宽高 var x = y = 200 ; //时钟中心坐标 var r = 180 ; //时钟半径 var r_hour = 60 ; //时针长度 var r_minute = 120 ; //分针长度

连环扣（Link Buckle）

阅读更多关于连环扣（Link Buckle）

连环扣（Link Buckle）示例 HTML CSS JS 示例 HTML < div id = " loader " > < canvas > </ canvas > </ div >  < a class = " dribbble " href = " https://dribbble.com/shots/6862662-3d-loading-circles " target = " _blank " > < img src = " https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png " alt = " " > </ a > CSS #loader { canvas { width : 240px ; height : 240px ; } } html { box-sizing : border-box ; -webkit-font-smoothing : antialiased ; } * { box-sizing : inherit ; &:before, &:after { box-sizing : inherit ; } } // Center & dribbble

canvas在图片上生成文字

阅读更多关于 canvas在图片上生成文字

newImage(text) { // 生成图片 var imageBox = document.getElementById("newimage") var canvas = document.getElementById("canvas") var cxt = canvas.getContext("2d") var img = new Image() img.src = require('assets/img/activity/1.jpg') // 图片加载完成，才可处理 img.onload = () => { // 画图(这里画布与图片等宽高) cxt.drawImage(img, 0, 0) // 设置字体大小 cxt.font = "28px Microsoft YaHei" // 更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式 cxt.textBaseline = 'middle' cxt.textAlign = 'center' // 距离左边的位置 var left = canvas.width / 2 // 距离上边的位置 (图片高-文字距离图片底部的距离) var top = canvas.height - 328 // 文字颜色 cxt.fillStyle = "#000" // 文字在画布的位置 cxt.fillText(text,

HTML5+CSS3入门学习（一）——HTML5

阅读更多关于 HTML5+CSS3入门学习（一）——HTML5

什么是 HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 HTML5 是如何起步的？ HTML5 是 W3C 与 WHATWG 合作的结果。编者注：W3C 指 World Wide Web Consortium，万维网联盟。编者注：WHATWG 指 Web Hypertext Application Technology Working Group。 WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。为 HTML5 建立的一些规则： 1.新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 2.减少对外部插件的需求（比如 Flash） 3.更优秀的错误处理 4.更多取代脚本的标记 5.HTML5 应该独立于设备 6.开发进程应对公众透明新特性 HTML5 中的一些有趣的新特性： 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素，比如 article

Image size doesn't match the canvas size

阅读更多关于 Image size doesn't match the canvas size

问题 I made canvas like this , <canvas id="mainCanvas" style="width:310px;height:212px;"> </canvas> then try to put png on the canvas in my script var canvas=document.getElementById("mainCanvas"); var context = canvas.getContext("2d"); var img= new Image(); img.src = "img/player.png"; context.drawImage(img,0,0,310,212); my plyer.png size is 312 *212 , the same size as canvas size. However,my png file is expansioned on the canvas. Consequently, right edge and bottom edge protrude from the canvas.

HTML5拖拽学习，canvas画布，

阅读更多关于 HTML5拖拽学习，canvas画布，

#拖拽学习要点 - draggable - ondragstart="drag(event)" - ondrop="drop(event)" - ondragover="fun2(event)" - dataTransfer - preventDefault ###draggable 主要用false或者true来设置文本或者图片是否可以在页面拖拽 ###ondragstart 主要在文本或者图片要拖拽的区域绑定事件，将event对象传过去--开始进行拖拽 function start(e){ e.dataTransfer.setData("Text",e.target.id); } ###ondrop 主要用于绑定事件到你想拖拽到你想要的div里面或者是其他标签里面(同样要将event对象传过去) function drop(e){ var data = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); e.preventDefault(); } ###ondragover 主要用于拖拽完毕后的绑定事件 function over(e){ e.preventDefault(); } ###dataTransfer

canvas 画布基本操作

阅读更多关于 canvas 画布基本操作

const canvas = document.getElementById('canvas'); // 2、画笔 --- canvas的上下文对象 const ctx = canvas.getContext('2d'); // 3、设置颜色 ---- 调色 ctx.fillStyle = "red"; // 填充颜色的设置 ctx.strokeStyle = 'blue'; // 轮廓（边框）颜色的设置 // 4、线条的设置 ctx.lineWidth = 10; // 线宽的设置 ctx.lineCap = 'butt/round/square'; // 线条边缘设置--- 不设置、手机加圆壳、手机加方壳 ctx.lineJoin = 'miter/bevel/round'; // 线条相交样式--- 尖尖的、平平的、圆圆的 // 5、绘制矩形 -- 确定区域 ctx.rect(x, y, w, h); // ctx.fillRect(x, y, w, h) 无需单独再上色，确定区域并且直接上色 // ctx.strokeRect(x, y, w, h) // 6、绘制圆弧 // startAngle endAngle ---- 用的不是角度，用的是弧度 // bool false--- 顺时针 true----逆时针默认值为false --- 可选参数 ctx.arc(x,

canvas-菜鸟版画布时钟

阅读更多关于 canvas-菜鸟版画布时钟

这是以前自己练习写的一个画布时钟 <!DOCTYPE html> <html lang="en"> 　　<head> 　　　　<meta charset="UTF-8"> 　　　　<title></title> 　　　　<style> 　　　　　　canvas{ 　　　　　　margin: 20px 400px 0; 　　　　　　} 　　　　</style> 　　</head> 　　<body> 　　　　<canvas width="500px" height="500px"></canvas> 　　　　<script> 　　　　　　var can=document.getElementsByTagName("canvas")[0]; 　　　　　　var x=can.getContext("2d"); 　　　　　　function clock(){ 　　　　　　　　//每次执行代码清楚一次画布　　　　　　　　x.clearRect(0,0,500,500); 　　　　　　　　//画一个蓝色实心圆　　　　　　　　x.beginPath(); 　　　　　　　　x.fillStyle="blue"; 　　　　　　　　x.arc(250,250,250,Math.PI*0/180,Math.PI*360/180); 　　　　　　　　x.fill(); 　　　　　　　　x

带几何特征的画布（canvas）

阅读更多关于带几何特征的画布（canvas）

带几何特征的画布（canvas）示例 CSS JS 示例 CSS @import "compass/css3" ; body { background-color : #1f9ede ; margin : 0 ; padding : 0 ; width : 100% ; height : 100% ; } * { margin : 0 ; padding : 0 ; width : 100% ; height : 100% ; } JS var _scene , _camera , _light , _renderer , _windowHalfX , _windowHalfY ; var _mouseX = _mouseY = 0 ; var _canvas ; var _textur ; var GRID_X = 32 ; var GRID_Y = 32 ; // init function var createWorld = function ( ) { //threejs - demo - https://threejs.org/examples/webgl_particles_random.html var ele = document . createElement ( 'div' ) ; document . body . appendChild ( ele ) ;

Canvas 生成 bitmap

阅读更多关于 Canvas 生成 bitmap

引用： http://wiseideal.iteye.com/blog/1175160 Java代码 int w = 320 ,h = 240 ; String mstrTitle = “感受Android带给我们的新体验”; Bitmap mbmpTest = Bitmap.createBitmap(w,h, Config.ARGB_8888); Canvas canvasTemp = new Canvas(mbmpTest); canvasTemp.drawColor(Color.WHITE); Paint p = new Paint(); String familyName = “宋体”; Typeface font = Typeface.create(familyName,Typeface.BOLD); p.setColor(Color.RED); p.setTypeface(font); p.setTextSize( 22 ); canvasTemp.drawText(mstrTitle, 0 , 100 ,p); 在canvas初始化的时候就传入了一个空的bitmap 最后canvas中绘画的内容都被绘制到了bitmap中，从而得到了我们需要的bitmap 来源： https://www.cnblogs.com/sode/archive/2012/03/08

订阅 canvas